[RÉGLÉ] html5 et css3

[marmotte28]

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 .

[ghazal]

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:

http://www.fontsquirrel.com/tools/webfont-generator

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 :

http://www.webtutorialplus.com/web-fonts/default.aspx

NB2 : les templates complexes genre Gantry ou autres peuvent proposer une liste de googlefonts

[marmotte28]

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

[kursus]

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.

[marmotte28]

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.

[lefabdu51]

Re : html5 et css3

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

[marmotte28]

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.