html5 et css3

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] html5 et css3

    Bonjour.
    Quelle évolution avec html5 et css3!
    Je m'y essaie. J'ai une instance joomla en local réservée aux essais
    J'ai importé une police exotique pour écrire un article,a l'aide d'un lien qui va chercher une police sur gogol et ca marche sans problèmes. Je voudrais maintenant utiliser une police embarquée sur le site avec "font-face" et la rien a faire. J'ai lu et relu des tutos, article sur le sujet et niet je n'y arrive pas.
    Dans la feuille css la police est déclarée par font face mais dans l'article, en mode code, comment m'y prendre.
    J'ai d'abord cru a une histoire de chemin mais ca ne semble pas être ca.
    je sèche .

  • #2
    Re : html5 et css3

    Salut,
    2 cas de figure:

    * 1 une police que tu as choisie et téléchargée
    dans n'importe quel fichier.css de ton template, ajouter:
    @font-face {
    font-family: 'zefont';
    src:url('fonts/zefont.eot');
    src:url('fonts/zefont.eot?#iefix') format('embedded-opentype'),
    url('fonts/zefont.svg#icomoon') format('svg'),
    url('fonts/zefont.woff') format('woff'),
    url('fonts/zefont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    les 4 fichiers de "zefont" seront dans un dossier "fonts" dans le dossier "css" du template, soit :
    /templates/ton_template/css/fonts/zefont.eot,
    etc...

    Tu rajoutes une class CSS dans fichier.css
    .mapolice{font-family: 'zefont';}
    dans l'éditeur, en mode code :
    <p class="mapolice"> blabla</p>
    PS : si tu n'as que le format .ttf, par ex, tu peux aller sur fontsquirrel:
    Create Your Own @font-face Kits by uploading the fonts you want to use.

    qui te génère les formats nécessaires

    2 * via les polices google, 2 possiblités
    - ou dans fichier.css, tout en haut (important) :
    @import url('http://fonts.googleapis.com/css?family=Archivo+Black');
    - ou dans index.php du template, au niveau des stylesheets
    <link href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
    Dans les 2 cas :

    n'importe où dans le fichier.css :
    .archivoblack{font-family: Archivo Black, sans-serif;}

    dans l'éditeur, en mode code :
    <p class="archivoblack">test archivo black</p>

    NB : un super "visualiseur" des google fonts :


    NB2 : les templates complexes genre Gantry ou autres peuvent proposer une liste de googlefonts
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Re : html5 et css3

      Super merci de cette réponse précise j'imprime ca est je fais les essais. Jze creuse , je creuse et je ne trouve pas.
      Pour les police issues de google comme je le disais j'avais trouvé et ca marche. Mais tu viens confirmer ce que j'ai fais.
      Je viendrais rendre compte

      Commentaire


      • #4
        Re : html5 et css3

        Juste pour faire le tatillon, @font-face n'est pas a proprement parler une propriété css3. Elle était déjà présente (même si peu adoptée) dans css2 et à même été implémentée en premier.... dans IE5

        Pour le reste, ghazal a tout dit.

        Commentaire


        • #5
          Re : html5 et css3

          Bonsoir.
          Kurlus: Oui j'avais deja vu dans les précédentes versions de css mais je n'utilisais pas pour cause de navigateur
          .
          Ghazal ca c'est d'la réponse y'a qu'a suivre pas a pas et c'est ce que j'ai fait.
          Je rencontre tjrs le même souci. j'ai ajouté une couleur au texte ca prend en compte donc ma feuille css et bien reconnue seule la police n'est pas celle attendue.
          Le code css m'a été fourni par le générateur (génial soit dit en passant) copié/collé donc pas d'erreur et j'ai vérifié mille fois.
          J'ai remarqué que la coloraton syntaxique de notepad+ colorais "@font face" sur ma feuille"content.css" pour l'éditeur mais pas sur la feuille du template comme si il n'en voulais pas.
          Je ne vois pas prk et se serais bien de la que vient mon souci.

          Commentaire


          • #6
            Re : html5 et css3

            peut tu faire un copier coller ici du code que tu insere ds ton fichier css ?

            Commentaire


            • #7
              Re : html5 et css3

              c'est deja par copié/coller que je l'ai écritdans np+.
              Code issue du générateur.
              le "@font face " est coloré en bleu sur une feuille et sur l'autre il reste noir.
              La suite du code est correctement coloré alors que c'est un copié collé???
              Le voici.
              @font-face {
              font-family: 'cac_champagneregular';
              src: url('cac_champagne1-webfont.eot');
              src: url('cac_champagne1-webfont.eot?#iefix') format('embedded-opentype'),
              url('cac_champagne1-webfont.woff') format('woff'),
              url('cac_champagne1-webfont.ttf') format('truetype'),
              url('cac_champagne1-webfont.svg#cac_champagneregular') format('svg');
              font-weight: normal;
              font-style: normal;

              }
              Je ne saurais pas prk.
              Par copier/coller j'ai refais une feuille css et la la coloration marche mais tjr pas la bonne police attendue
              Kel casse tete

              épilogue.
              le code fourni par le générateur ne tient pas considère que l'on a mis les fichiers dans le repertoire css
              et moi comme indiqué par Ghazal j'ai fait un rep "font" et la tout est ok l'affichage sur le site et dans l'éditeur.
              Merci a vous. J'ai la bonne procédure de façon certaine.
              Dernière édition par marmotte28 à 03/04/2013, 21h08

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X