recherche
Maisoninterface Webtutoriel CSSParlez de l'application de polices Font Set dans Web Design_Experience Exchange

Hihi, 大家好~  最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息为主,而字体,作为文字表现形式的最重要参数之一,自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段,却不明白为什么这样设置,这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档,却没有发现任何能指定某一个特定字体的规则。

想想十年前,你可以随处看见类似于这样的代码:

 

font face="Frankin Gothic Book">Lorem Ipsumfont>

 

几乎不会有人考虑到,Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果,系统因为找不到这种字体,就改用Mac的默认字体显示了。于是,网页的风格就和原来完全不一样了,根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表;浏览器从列表头部开始匹配,知道找到第一个可用的字体,并使用该字体进行显示。

比如上面这个例子,我们可以创建这样的一个font set:

 

span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsumspan>

 

我们来看看浏览器怎么来呈现这段文字吧:
  • Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。
  • Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。

这样在Mac上,Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

 

但是可能存在一台电脑,上面既没有Frankin Gothic Book字体,也没有Lucida Grande字体,那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统,导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”,也就是我们经常看见的 serifsans-serif。我会在今后的文章中详细的介绍这两个,以及一些其他的通用字体族。在这里,我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下,浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字:

 

span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsumspan>

Jetons un coup d'œil à la manière dont le navigateur affiche ce texte amélioré :
  • Sous Windows : le navigateur commence la recherche à partir de la première police de la liste - Frankin Gothic Book existe dans le système et s'affiche en utilisant la police Frankin Gothic Book.
  • Sous Mac : le navigateur lance la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - Lucida Grande. La police Lucida Grande existe dans le système, la recherche est terminée et la police Lucida Grande s'affiche.
  • Certains systèmes : le navigateur commence la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - la police Lucida Grande n'existe pas non plus sur le système. Continuez à chercher la police suivante : la police universelle sans empattement. Le navigateur utilise sa police sans empattement par défaut « Arial » pour afficher ce texte.

Veuillez noter deux points. Tout d’abord, la police à laquelle correspond une famille de polices universelles est déterminée par le navigateur. Dans l'exemple ci-dessus, le navigateur a spécifié Arial comme police sans empattement, mais il est tout à fait possible qu'un autre navigateur ait spécifié Helvetica comme police sans empattement. La police qui sera finalement utilisée est imprévisible. Deuxièmement, une famille de polices universelle n’est qu’une solution d’appoint lorsque les autres polices du jeu de polices ne sont pas valides. Par conséquent - Les concepteurs doivent faire de leur mieux pour fournir un jeu de polices complet pour couvrir tous les systèmes autant que possible, et ne doivent pas s'appuyer sur des familles de polices universelles .

Les deux méthodes d'écriture similaires aux suivantes sont fausses :

span style="font-family:sans-serif" >Lorem Ipsumspan>
span style="font-family:sans-serif,Arial"> Lorem Ipsumspan>

L'erreur avec la première façon d'écrire est que cela équivaut à ne pas spécifier de police du tout, et c'est toujours au navigateur de sélectionner la police. Écrire équivaut à ne pas écrire.

L'erreur dans la deuxième manière d'écrire réside dans l'ordre. Parce qu'une famille de polices universelle ne devrait fonctionner que lorsque toutes les autres polices d'un jeu de polices sont désactivées. Par conséquent, placer la police spécifiée après la police universelle entraînera l'utilisation de la police universelle lorsque la police spécifiée ne lui correspond pas. Par conséquent, vous devez vous assurer que la police universelle est la dernière position dans le jeu de polices .

De plus, il y a deux choses à expliquer ici.

Tout d'abord, bien que les règles selon lesquelles les polices du jeu de polices sont utilisées par le navigateur semblent simples, elles sont en réalité très délicates. Je ferai des instructions spécifiques dans les prochains articles.

Deuxièmement, bien que le nom de la règle CSS de la police soit appelé font-family, il s'agit essentiellement d'un jeu de polices, et non d'une famille de polices au sens de l'impression. La famille de polices en impression fait référence à une série de combinaisons d'intensités différentes de la même police, telles que la famille Lucida (y compris Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande, etc.) et la famille Arial (Arial, Arial Black, Arial Rounded). MT, etc.) ), mais ces familles de polices ne conviennent évidemment pas pour être utilisées directement comme jeu de polices.

C'est tout pour aujourd'hui. La prochaine fois, nous parlerons davantage des familles de polices universelles.

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Comment nous avons tagué Google Fonts et créé des goofont.comComment nous avons tagué Google Fonts et créé des goofont.comApr 12, 2025 pm 12:02 PM

Goofonts est un projet parallèle signé par un développeur-femme et un concepteur-mari, tous deux de grands fans de typographie. Nous avons marqué Google

Articles de développement Web intemporelsArticles de développement Web intemporelsApr 12, 2025 am 11:44 AM

Pavithra Kodmad a demandé aux gens des recommandations sur ce qu'ils pensaient être certains des articles les plus intemporels sur le développement Web qui ont changé

L'accord avec l'élément de sectionL'accord avec l'élément de sectionApr 12, 2025 am 11:39 AM

Deux articles ont publié exactement le même jour:

Pratiquez des requêtes GraphQL avec l'API de l'état de JavaScriptPratiquez des requêtes GraphQL avec l'API de l'état de JavaScriptApr 12, 2025 am 11:33 AM

Apprendre à créer des API GraphQL peut être assez difficile. Mais vous pouvez apprendre à utiliser les API GraphQL en 10 minutes! Et il se trouve que je suis parfait

CMSS au niveau des composantsCMSS au niveau des composantsApr 12, 2025 am 11:09 AM

Lorsqu'un composant vit dans un environnement où les données interrogent les données qui vivent à proximité, il y a une ligne assez directe entre le composant visuel et le

Définissez le type sur un cercle ... avec chemin de décalageDéfinissez le type sur un cercle ... avec chemin de décalageApr 12, 2025 am 11:00 AM

Ici, une rotation CSS légitime de Yuanchuan. Il y a ce chemin de décalage de la propriété CSS. Il était une fois, il s'appelait le chemin de mouvement, puis il a été renommé. je

What does "revert" do in CSS?What does "revert" do in CSS?Apr 12, 2025 am 10:59 AM

Miriam Suzanne explique dans une vidéo de développeur de Mozilla sur le sujet.

Les amoureux modernesLes amoureux modernesApr 12, 2025 am 10:58 AM

J'adore les trucs comme ça.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit