<font>
DĂ©fini des styles applicables Ă des textes
Exemple
Attributs
| attribut | défaut | description |
|---|---|---|
| name | identifiant unique (pour use-font) | |
| family | arial | identifiant de police |
| style | style | |
| weight | graisse | |
| variant | variation (smallcaps...) | |
| size | taille (seuls les em sont supportés) | |
| color | couleur | |
| line-height | hauteur de ligne | |
| level | niveau de redéfinition (0=site, ...) |
Ces styles sont ensuite applicables Ă l'aide de la balise css, par exemple
<css selector='li a' use-font='navs' color='#c00' />
</nav>
Les liens de la navigation se voient attribués tous les styles définis dans la balise <font> nommée navs. La couleur #c00 est définie par dessus.
Polices standard
Utiliser comme valeur pour family l'une des valeur de la colonne de gauche, cela produira automatiquement la chaine de substitution de la 2ème colonne.
| code | résultat |
|---|---|
| arial | Arial,Helvetica,sans-serif |
| comic | 'Comic Sans MS',Textile,cursive |
| courier | 'Courier New',Courier,monospace |
| georgia | Georgia,'Times New Roman',Times,serif |
| impact | Impact,Charcoal,sans-serif |
| lucida | 'Lucida Sans Unicode','Lucida Grande',sans-serif |
| palatino | 'Palatino Linotype','Book Antiqua',Palatino,serif |
| tahoma | Tahoma,Geneva,sans-serif |
| times | 'Times New Roman',Times,serif |
| trebuchet | 'Trebuchet MS',Helvetica,sans-serif |
| verdana | Verdana,Geneva,sans-serif |
Polices opentype
Les polices opentype suivantes disponibles
| code | Nom | Graisse | Substitut |
|---|---|---|---|
| afta-serif | AftaSerifThin-Regular | 200 | times |
| alex-brush | AlexBrush-Regular-OTF | 400 | verdana |
| architects-daughter | ArchitectsDaughter | 400 | verdana |
| bitstream-vera-serif | VeraSerif | 400 | georgia |
| bodoni-xt | BodoniXT | 400 | times |
| bubblegum-sans | BubblegumSans-Regular | 400 | comic |
| comfortaa | Comfortaa_Thin | 400 | verdana |
| droid-serif | DroidSerif-Regular | 400 | times |
| eb-garamond | EBGaramond | 400 | times |
| gandhi-serif | GandhiSerif-Regular | 400 | times |
| josefin-slab | JosefinSlab-SemiBold | 400 | times |
| komika-display | Komika_display | 400 | comic |
| open-sans-condensed | OpenSans-CondLight | 400 | verdana |
| quicksand | Quicksand_Light | 100 | verdana |
| simonetta | Simonetta-Regular | 400 | verdana |
| sling | SlingLight | light | times |
Polices Google
Les polices Google sont utilisables en utilisant la syntaxe suivante dans un attribut family:
Exemples:
<font name='titles' family='gwf/Montserrat+Alternates:400/georgia' weight='400' />
liste de valeurs possible
| arial |
| comic |
| courier |
| georgia |
| impact |
| lucida |
| palatino |
| tahoma |
| times |
| trebuchet |
| verdana |
| gwf-actor |
| gwf-amatic |
| gwf-anaheim |
| gwf-anton |
| gwf-armata |
| gwf-arsenal |
| gwf-asap |
| gwf-audiowide |
| gwf-barlow |
| gwf-basic |
| gwf-bitter |
| gwf-black-han-sans |
| gwf-cabin |
| gwf-candal |
| gwf-chonburi |
| gwf-coda-caption |
| gwf-coda |
| gwf-courgette |
| gwf-cuprum |
| gwf-dancing-script |
| gwf-do-hyeon |
| gwf-dosis |
| gwf-eb-garamond |
| gwf-exo-2 |
| gwf-exo |
| gwf-expletus-sans |
| gwf-fredericka-the-great |
| gwf-graduate |
| gwf-gruppo |
| gwf-hind |
| gwf-hind-vadodara |
| gwf-jura |
| gwf-kalam |
| gwf-karla |
| gwf-lato |
| gwf-libre-franklin |
| gwf-lora |
| gwf-monda |
| gwf-montserrat-alternates |
| gwf-montserrat |
| gwf-nanum-gothic |
| gwf-noto-sans |
| gwf-noto-serif-sc |
| gwf-nunito |
| gwf-open-sans-condensed |
| gwf-open-sans |
| gwf-oswald |
| gwf-oxygen |
| gwf-patua-one |
| gwf-paytone-one |
| gwf-philosopher |
| gwf-playfair-display |
| gwf-play |
| gwf-poiret-one |
| gwf-questrial |
| gwf-quicksand |
| gwf-rajdhani |
| gwf-raleway |
| gwf-recursive |
| gwf-roboto-condensed |
| gwf-roboto |
| gwf-roboto-mono |
| gwf-roboto-slab |
| gwf-rosarivo |
| gwf-rubik |
| gwf-rubik-mono-one |
| gwf-russo-one |
| gwf-saira-semi-condensed |
| gwf-satisfy |
| gwf-sintony |
| gwf-slabo-27px |
| gwf-source-sans-pro |
| gwf-tajawal |
| gwf-titillium-web |
| gwf-ubuntu |
| gwf-varela-round |
| gwf-work-sans |
| gwf-yellowtail |
Attention à vérifier que la police choisie supporte les accents.
Polices Ă Ă©viter
Certaines polices peuvent s'afficher différemment sur PC et MAC (espacement différent au-dessus d'en-dessous, ce qui pose ensuite des problème de centrage). Vérifier lors de l'utilisation d'une nouvelle police.
Les polices suivantes posent problème:
- Tajawal
Variantes Gras italic
Pour simplifier on peut utiliser une variable et charger toutes les variantes nécessaires ainsi
<font name='text' fr='Textes' family='{typo}' weight="400" size='1' color='{content-color}' level='0' />
