Share
Les polices Web ont permis de donner vie aux conceptions, nous évitant ainsi les défauts du système si largement utilisés au début de la conception Web. Avec autant d'options disponibles aujourd'hui, nous avons de nombreuses astuces pour servir et personnaliser les polices personnalisées. Le niveau 4 du module de polices CSS décrit des options plus fascinantes que vous allez adorer, y compris des propriétés intéressantes telles que font-min / max-size. Cet article ne dévoilera pas chacune des dernières miettes du niveau 4, mais mettra en évidence les parties intéressantes encore balbutiantes. L'aventure commence maintenant!
Actuellement, nous sommes assis entre deux niveaux de spécifications. D'un côté nous avons le niveau 3; une spécification qui est à la «recommandation du candidat» depuis octobre 2013. Pour l'avenir, nous avons le niveau 4; une spécification reposant sur «Working Draft» depuis juillet 2017. Si vous avez besoin d'un rappel concernant l'ordre des étapes de spécification W3C, prenons un moment pour les passer en revue:
Maintenant que nous avons compris les étapes de la spécification, plongeons dans les entrailles du niveau 4 et présentons certaines des fonctionnalités connues et documentées de ce module..
Les parties du niveau 3 qui deviennent normalisées seront transférées au niveau 4, mais le niveau 4 comprendra également ses propres ajouts uniques. Sections telles que les variantes de police, les commandes de rendu de police, la prise en charge des polices de couleur, les propriétés de base des policesetLes ressources de polices contiendront de nouveaux éléments que de nombreux développeurs trouveront utiles..
La police de caractères rendue est déterminée par la famille de polices et d'autres propriétés de police qui s'appliquent à un élément donné, tel que poids de la police et le style de police par exemple. Cette structure permet aux paramètres de varier indépendamment les uns des autres et ce qui englobe Propriétés de base de la police. Alors, qu'est-ce qui est prévu pour ce groupe??
.element font-min-size: 0.875rem; taille-police-max: 5rem;
Parmi tout ce qui est décrit au niveau 4, ces deux propriétés sont mes préférées car elles permettront à un élément de taille de police devenir "coincé" entre les valeurs fournies. C'est certainement une excellente nouvelle pour les fans de design réactif. Les valeurs peuvent être une taille absolue, une taille relative ou un pourcentage de longueur..
Il n'y a aucune documentation à ce jour qui indique comment l'événement de redimensionnement du navigateur déclenche l'une ou l'autre propriété. Si vous souhaitez expérimenter cette fonctionnalité en utilisant l'indicateur de fonctionnalités de la plate-forme Web expérimentale dans Chrome, vous n'avez pas de chance..
La majorité des éléments décrits dans cette section permettent de contrôler les aspects liés à l'extraction, au référencement et à l'affichage de la famille de polices de votre choix..
@ font-face font-display: auto | bloc | swap | repli | optionnel;
Cette propriété détermine la manière dont une police apparaît, en fonction du moment où elle a été téléchargée et prête à être utilisée par le navigateur. Il est également destiné à être utilisé dans votre @ font-face ou @ font-feature-values déclaration.
Accentsconagua
auto: La stratégie d'affichage des polices est définie par l'utilisateur et par l'agent (c'est-à-dire le navigateur), sauf définition explicite dans CSS.bloc: Donne à la police des caractères une courte période de bloc (3s est recommandé dans la plupart des cas) et une période de swap infinie.échanger: Donne à la police une période de blocage de 0s et une période d’échange infinie.se retirer: Donne à la police de caractères une période de bloc extrêmement réduite (100 ms ou moins est recommandé dans la plupart des cas) et une courte période d'échange (3 secondes est recommandé dans la plupart des cas).optionnel: Donne à la police une période de bloc extrêmement réduite (100 ms ou moins est recommandé dans la plupart des cas) et une période de swap.Pour tous ceux qui s'intéressent de près aux performances des polices Web et qui sont occupés quotidiennement à débattre FOUT ou FOIT, alors cette propriété vous rendra extrêmement heureux.
@ font-feature-values font-display: auto | bloc | swap | repli | optionnel;
Quand affichage des polices est omis dans un @ font-face règle, l'agent d'utilisateur utilise le affichage des polices valeur définie via @ font-feature-values pour le pertinent famille de polices si on est réglé, sinon, par défaut affichage de la police: auto. Voir l'explication précédente concernant affichage des polices valeurs.
Le jeu de règles est idéal dans les cas où une police est servie par un tiers et que vous n’exercez aucun contrôle sur la @ font-face règles, mais sont toujours en mesure de définir une valeur par défaut affichage des polices politique pour le fourni famille de polices. C'est une bonne nouvelle pour les sites de construction avec une action non-tierce non-stop.
@ font-feature-values font-family: "Nom de police personnalisé", sans-serif; affichage de la police: repli;
Bien que nouveau et quelque peu vague, je ne peux que supposer pour contrôler un famille de polices comportement d’affichage, le développeur doit utiliser le famille de polices propriété au sein de cet ensemble de règles afin de cibler la police souhaitée. Encore une fois, ceci est seulement une hypothèse de ma part et non factuelle par tous les moyens.
Cette section est nouvelle à 100% et spécifique au niveau 4. La plupart des fonctionnalités actuellement documentées concernent le dimensionnement et les paramètres de chaque police..
Cette propriété est utilisée afin de conserver les traits stylistiques et d’améliorer la lisibilité pour différentes tailles optiques. Avec le type numérique, nous avons la possibilité d'adapter une police à n'importe quelle taille, mais cela ne prend pas en compte l'apparence du caractère à ces différentes tailles..
«Les textes rendus en différentes tailles bénéficient souvent de représentations visuelles légèrement différentes. Par exemple, pour faciliter la lecture de petites tailles de texte, les traits sont souvent plus épais avec des empattements plus grands. Les textes plus volumineux ont souvent une silhouette plus délicate, avec plus de contraste entre les traits plus épais et les traits plus fins. "~ Brouillon de travail de niveau 4
.element font-optical-sizing: auto | aucun
auto: L’agent utilisateur peut modifier la forme des glyphes en fonction de la taille de police et la densité de pixels de l'écran. Pour les polices OpenType et TrueType qui utilisent des variantes de police, utilisez souvent les touches opsz variation de police.aucun: L'agent utilisateur ne doit pas modifier la forme des glyphes pour la taille optique..element font-variation-settings: normal | []
Cette propriété fournit un contrôle de bas niveau sur les variations de police OpenType ou TrueType. Il s'agit d'un moyen de fournir un accès aux variantes de police qui ne sont pas largement utilisées, mais qui sont nécessaires pour un cas d'utilisation particulier..
Ordinaire: Le texte est mis en forme en utilisant les paramètres par défaut. .élément / * nom et numéro d’axe à quatre lettres * / font-variation-settings: "opsz" 0.5;
La valeur de chaîne utilisée dans le code ci-dessus est connue sous le nom d'axe à quatre lettres décrivant la fonctionnalité que vous souhaitez modifier, ainsi que la valeur de variation, généralement comprise entre 0 et 1, mais peut également être négative si nécessaire. Les variations autorisées dépendent toujours de la police choisie.
Les polices de couleur sont nouvelles au niveau 4 et permettent aux fichiers de police de décrire non seulement les contours décrivant les bords des glyphes, mais également les couleurs présentes à l'intérieur des glyphes. Pourquoi voudriez-vous utiliser l'une de ces fonctionnalités? Je suggère de lire cet article de Grace Fussell pour se mettre au courant:
.élément font-palette: normal | lumière | sombre |;
De nombreux formats de fichier de polices de couleur permettent de paramétrer les couleurs des glyphes. Dans ces polices, les couleurs sont référencées par index lors de la description de la géométrie de chaque glyphe. Ces index sont résolus dans une palette active en utilisant une table de consultation présente dans la police. Cependant, de nombreuses polices contiennent plusieurs palettes, chacune contenant un ensemble de couleurs complémentaires choisies par le concepteur de polices pour fournir des résultats visuels agréables. Les développeurs peuvent définir une palette en utilisant le @ font-palette-values règle mentionnée dans la section suivante.
/ * Syntaxe * / @ font-palette-values/ * Exemple * / @ font-palette-values Augusta font-family: Handover Sans; palette de base: 3; 1: rgb (43, 12, 9); 3: var (- surbrillance);
Cela représente une palette de couleurs utilisée dans une police. Il définit une palette de couleurs et associe cette palette à une police spécifique. Cela permet à un auteur Web de sélectionner des couleurs arbitraires à utiliser dans une police de couleur plutôt que de se limiter aux palettes préexistantes contenues dans les fichiers de police.
palette de base: Ce descripteur spécifie une palette de la police utilisée par la règle contenant les polices @ font-palette-values comme valeur initiale. Sinon .element font-family: 'Nom de police personnalisé'; présentation de la police: auto | texte | emoji;
Cette propriété permet aux auteurs Web de choisir si la présentation emoji ou la présentation texte est utilisée pour certains points de code emoji. Une énorme victoire pour les fanatiques emoji
Il y a certainement beaucoup de nouvelles fonctionnalités intéressantes en cours de développement pour les polices Web et je vous encourage à commencer à expérimenter vos favoris dès qu'ils sont disponibles. Si vous avez un favori particulier du niveau 4 ou même du niveau 3, faites-le nous savoir dans les commentaires, y compris vos opinions sur les fonctionnalités évoquées..
!
