Font-effect - Propriété CSS

font-effect

Résumé des caractéristiques de la propriété font-effect

Description rapide
Permet d'appliquer quelques effets au texte : relief, bordure...
Statut
Obsolète ✗
Utilisable sur
HTML
Valeurs prédéfinies
none | emboss | engrave | outline
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Oui.
Type d'animation
Not animable : la propriété font-effect ne peut pas être animée.
Module W3C
Module CSS - Polices de caractères

Schéma syntaxique de font-effect.

Font-effect property - Syntax diagramSyntax diagram of the font-effect CSS property. See stylescss.free.fr for details. none none engrave engrave emboss emboss outline outlinefont-effect:;font-effect:;
Schéma syntaxique de la propriété font-effect
Les liens du schéma donnent accès à plus de détails

Description de la propriété font-effect.

✗
La propriété font-effect avait été envisagée dans la version CSS3, mais n'a finalement jamais été standardisée. Elle ne figure plus dans aucun des modules du W3C et aucun navigateur ne la traite.

font-effect permet d'appliquer à un texte un effet de relief ou de bordure.

Syntaxes pour font-effect.

  • font-effect: none;

    Aucun effet n'est appliqué au texte.

  • font-effect: engrave;

    Un effet de relief est appliqué au texte : les caractères sont en creux, comme s'ils étaient gravés dans la page.

    Exemple avec font-effect:engrave

  • font-effect: emboss;

    Les caractères sont en relief, comme s'ils dépassaient la surface de la page.

    Exemple avec font-effect:emboss

  • font-effect: outline;

    Seuls les contours des caractères sont affichés : ils paraissent évidés.

    Exemple avec font-effect:outline

Valeurs communes à toutes les propriétés :

font-effect: initial (none) font-effect: inherit font-effect: revert font-effect: revertLayer font-effect: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif.

font-effect :
Texte d'exemple

Prise en charge par les navigateurs (compatibilité).

Aucun navigateur ne prend plus en charge cette propriété.

Voir aussi, au sujet des polices de caractères.

Bien que non standardisé, font-effect a été définie dans le module CSS Fonts Module. Les autres propriétés du module sont standards.

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-stretch
Modifie l'étirement ou la compression des caractères.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
⚠
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
⚠
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.