likes
comments
collection
share

CSS字体相关属性

作者站长头像
站长
· 阅读数 63

在网页设计中，字体是一个非常重要的元素。正确选择和使用字体可以使网页更加美观、易读和易于理解。CSS提供了一系列字体相关的属性，可以帮助我们控制字体的大小、样式、粗细、颜色等等。在本文中，将参考MDN并介绍列出的字体相关属性。

温馨提示：本文中部分属性会结合设计师必看的字体与排版应用指南（以下简称指南）进行说明，如果与规范中的定义有出入，请以规范为主。

字型、字体和字形

CSS字体相关属性

字体格式

  • TrueType字体 (TTF)：TrueType是1980年代后期由Apple和Microsoft开发的字体标准。 TrueType是Mac OS和Microsoft Windows操作系统最常用的字体格式。

  • OpenType字体 (OTF)：OpenType是可缩放计算机字体的格式。它基于TrueType构建，并且是Microsoft的注册商标。今天，OpenType字体在主要计算机平台上得到普遍使用。

    本文中有相当一部分CSS属性与OpenType的特性相关。建议先学习一下OpenType字体。更具体的可以查看OpenType font development。

  • Web 开放字体格式 (WOFF)：WOFF是用于网页的字体格式。于2009年开发，现已成为W3C的推荐标准。WOFF本质上是具有压缩和其他元数据的OpenType或TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。

  • Web 开放字体格式 (WOFF 2.0)：TrueType/OpenType字体比WOFF 1.0提供更好的压缩。

  • SVG字体/形状：SVG 字体允许在显示文本时将SVG用作字形。SVG 1.1规范定义了一个字体模块，该模块允许在SVG文档中创建字体。还可以将CSS应用于SVG文档，同时@font-face 规则可以应用于SVG文档中的文本。

  • 嵌入式 OpenType 字体 (EOT)：EOT字体是Microsoft设计的OpenType字体的紧凑形式，用作网页上的嵌入式字体。

各浏览器对各Web字体格式的兼容性

CSS字体相关属性

font-family

font-family指定字族名称或通用族名称的优先级列表。

族类

族类就是不同字体类型，例如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。而这些众多字体又可分为衬线体和无衬线体。

  • 衬线体：意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。宋体就是衬线体。衬线体在一般的APP中比较少见，文字阅读类APP偏爱这种衬线体。
  • 无衬线体：没有额外的装饰，而且笔画的粗细差不多。黑体就是无衬线字体。相比严肃的衬线体，简单干净的无衬线体给人一种休闲轻松的感觉。因此大多数App都是使用黑体作为默认字体。 CSS字体相关属性

字族

一个族类包含不同的字体，然而一个字体又可能有好几种字族。在CSS中字族用font-family属性指定。比如在电脑上安装了JetBrains Mono字体，在ttf文件夹中就可以看到各种样式的字族。 CSS字体相关属性

基本字族包括细体、标准、粗体、斜体，值得注意的是，斜体字常用在引用文本上，代表“本段文字引用的是另一个著作”的含义。

取值

值类型简介
字族名称（family-name）字体系列的名称。
通用字族名称（generic-name）是具有标准名称（由 CSS 定义）的字体系列，但它是系统上现有已安装字体系列的别名。也是一种回退机制，是一种在指定的字体都不可用时保留样式表作者的某些意图的方法

通用字体族名称表如下：

字体族名称简介
serif衬线字体。表示脚本的正式文本样式。通常按比例间隔。比sans-serif通用字体系列中的字体在粗笔画和细笔画之间显示更大的变化。
sans-serif无衬线字体。通常对比度低(垂直和水平的主干有接近相同的粗细)，并且笔画结尾比较普通(没有任何外露、交叉笔画或其他装饰)。
monospace等宽字体。所有字形具有相同的固定宽度。这通常用于呈现计算机代码的示例。
cursive草书。通常使用更非正式的脚本样式，结果看起来更像手写笔或毛笔书写，而不是印刷的字母
fantasy幻想字体。主要是装饰性或表达性字体，包含装饰性或表达性的字符表示。
system-ui系统用户界面字体。允许在运行UA的平台上使用默认用户界面字体呈现文本。
ui-serif用于系统用户界面的衬线变体。
ui-sans-serif用于系统用户界面的无衬线变体。
ui-monospace用于系统用户界面的等宽变体。
ui-rounded用于系统用户界面的圆形变体。
emoji表情符号。与表情符号字符一起使用。
math数学字体。与数学表达式一起使用。
fangsong仿宋字体。用于中文的仿宋字体。介于宋（serif）和楷（cursive）之间的一种轻松的中间形式

注意：

  • 在使用font-family时，至少要包含一个通用字族名称，通常写在最后。因为指定的字族不一定都能用，这允许浏览器在必要时选择可接受的回退字体。
  • 指定的字族列表优先级从高到低。字体选择不会停留在用户系统中列表中的第一个字体。相反，字体选择是一次选择一个字符，因此，如果可用的字体没有所需字符的字形，则尝试后一种字体。当字体仅在某些样式、变体或大小中可用时，这些属性也可能影响所选择的字体族。
  • 除了通用字族外的其他字体系列需要使用引号包裹。并且为避免转义错误，建议将包含空格、数字或连字符以外的标点符号的字体族名也用引号包裹。

font-weight

font-weight属性设置字体的粗细或粗体（字重）。

取值

关键字/值类型简介
number（1 ~ 1000）数字由低到高字体越粗，反之越细。
normal正常字体粗细。与 400 相同.
lighter比父元素font-weight更细的相对字体粗细。
bold粗体字体粗细。与 700 相同.
bolder比父元素font-weight更粗的相对字体粗细。
  • 需要注意的是，font-weight属性的效果由font-family决定。比如font-family指定了某个字体，然后font-weight: bold;，但是指定的字体中并没有bold样式的字体，用户代理会转为使用与bold相邻的可用字体粗细，具体规则如下：
font-weight值（w）实际呈现字体粗细规则
w < 400先降序查找小于w的可用字体粗细；找不到则升序查找大于w的可用字体粗细。
400 ≤ w ≤ 500先升序查找w到500之间的可用字体粗细；找不到则降序查找400到w之间的可用字体粗细；还找不到就升序查找大于500的可用字体粗细。
w > 500先升序查找大于w的可用字体粗细；找不到则降序查找小于w的可用字体粗细。
  • 数字值（1，900）对应的字体粗细名称：
数字值对应名称
100Thin
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)

相对粗细相对于父元素font-weight的粗细

根据CSS Fonts Module Level 4规范（以下简称 CFML4），相对粗细相对于父元素font-weight的粗细如下表：

继承父元素font-weight值（w）bolderlighter
w < 100400无变化
100 ≤ w < 350400100
350 ≤ w < 550700100
550 ≤ w < 750700400
750 ≤ w < 900900700
900 ≤ w无变化700

字重设计

一般都有细体、正常、粗体三种基本字族。在应用场景上，通常细体多用于超大号字体；「正常」用于正文内容；「粗体」表示强调，多用于标题。

两种字重设计

  • 轻字重：传递出轻盈放松的视觉感受，常配合粗的字重使用，在一些辅助信息，说明文案时候使用；
  • 重字重：视觉感受庄重，很重要，常用在重点强调的文字，页面大标题，数字，引导行动操作点上等。

知识点：在进行界面设计时，不要用软件自带的文本加粗，它不仅破坏了字体本身的美感，还改变了文字原本的字宽，小字体下会模糊不清，合理的方式是使用字体本身的字重来控制粗细。

注意超细体的字体

字重超细的字体要谨慎使用。如果你设计的文本是装饰性倒还好，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分低分辨率的手机屏幕上看起来会非常糟糕。

font-size

font-size属性设置字体的大小（字号）。对于可伸缩字体，font-size是应用于字体EM单元的缩放因子。对于不可伸缩的字体，字体大小被转换为绝对单位，并与字体声明的字体大小相匹配，对两个匹配值使用相同的绝对坐标空间。

取值

值类型/关键字值
绝对大小xx-small/x-small/small/medium/large/x-large/xx-large/xxx-large
相对大小larger/smaller
长度/百分比如16px/10%
math如clamp(16px, ..., 35px);

绝对大小关键字与正常字体大小的比例：

绝对大小xx-smallx-smallsmallmediumlargex-largexx-largexxx-large
比例3/53/48/916/53/223

字号大小设计

字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。通常在网页端使用px作为字号的单位。移动端兴起后，IOS字体单位是pt，Android是sp。各端更多设计规范请参考设计规范。

设计中的最小字号

我们都知道在界面设计中最小字号不能低于20px，那是因为，正常情况下，在手机距离眼睛30cm左右，使用视角计算公式，我们能识别到的最低的文字大小为h=2∗30⋅tan(0.3/2)≈0.157cmh= 2*30·tan(0.3/2) ≈ 0.157cmh=2∗30⋅tan(0.3/2)≈0.157cm，拿我们经常使用iPhone7的尺寸1334×750为例。iPhone7的dpi为324，也就是一英寸上显示324个像素，1英寸为2.54cm，那么0.157cm=324∗(0.157/2.54cm)=20px0.157cm=324*(0.157/2.54cm)= 20px0.157cm=324∗(0.157/2.54cm)=20px。

字号的基数关系

我们在做设计时，字号的单位最好使用一个基数作为倍增，如2、4、6、8、10  或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中，使用2为单位会导致字号过多，且2号字体的差异化不大。所以在字号方面我们使用4作为单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用4为单位，能满足字体大小的均衡。

使用技巧

  • 在<body>元素上设置一个具体的字体大小，在页面的其他地方使用相对大小关键字轻松的放大或缩小这个页面上的字体。
  • 当需要像素精度时，以像素值（px）为单位设置字体大小是一个不错的选择。px值是静态的。这是一种独立于操作系统的跨浏览器方式，用于从字面上告诉浏览器以我们指定的像素高度数呈现字母。

font-style

font-style属性用于选择当前字体的正常或者斜体样式。斜体字体本质上通常是草体，比无样式字体使用更少的水平空间。

取值

关键字简介
normal选择font-family中被分类为normal字体的字体。
italic选择font-family中被分类为italic字体的字体。

font-style的值还可以是oblique和oblique angle，但是现在绝大部分的浏览器并不兼容它们，并且如果oblique不可用，会回退到italic字体，这里就不过多说明。

font-synthesis

font-synthesis属性控制浏览器可以合成哪些缺失的字体（粗体、斜体或小大写）。在需要用到font-family的某个字体，但这个字体不存在时，就可以通过这个属性控制用户代理是否合成对应的字体。

比如设置了font-style: italic;但是font-family指定的字体当中没有斜体字体，那么就可以通过font-synthesis: style;让用户代理去合成斜体字体。

根据CFML4中的定义，font-synthesis属性是font-synthesis-weight、 font-synthesis-style和font-synthesis-small-caps属性的简写，但是在MDN中并没有这三个属性的内容。在Can I use当中有这三个属性的结果，不过兼容性并不乐观。

简单了解一下这三个属性：分别表示当缺少粗体、斜体和小型大写字体时，是否控制浏览器合成对应的字体，其取值均为auto和none。

大多数标准西方字体包括斜体和粗体变体，某些字体包括小写字母变体。但是用于中文、日文、韩文和其他标文的字体往往不包含这些变体，合成它们可能会影响文本的易读性。可以关闭浏览器的默认字体合成。

取值

关键字简介
none表示不能合成粗体、斜体或小写字体。
weight表示如果需要，可以合成粗体字体。
style表示如果需要，可以合成斜体字体。
small-caps表示如果需要，可以合成小型大写字体。

font-stretch

font-stretch属性用于从font-family中选择正常的、压缩的或拉伸（横向）的字体。

取值

关键字/值类型简介
normal指定普通字体。
semi-condensed、condensed、extra-condensed和ultra-condensed均指定比正常字体更紧凑的字体，其中ultra-condensed字体是最“瘦”的字体。
semi-expanded、expanded、extra-expanded和ultra-expanded均指定比正常字体更紧凑的字体，其中ultra-expanded字体是最“胖”的字体。
百分比表示字形的分数宽度。

值为百分比时不允许为负，其中关键字值与百分比值的对应关系如下：

关键字ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedultra-expanded
对应百分比50%62.5%75%87.5%100%112.5%125%200%

与font-weight属性类似，为font-stretch的值由font-family决定。如果font-family指定的字体没有完全匹配的值的字体时，font-stretch小于100%的值映射到较窄的面，大于或等于100%的值映射到较宽的面。

注意：比较奇怪的是在查浏览器兼容性的时候，大部分浏览器都是绿色，看着是兼容的，但是实际上并没有效果，我甚至把官方示例的LeagueMono字体都下载试过了也没有效果，看了一些社区博客，统一的说法是目前主流浏览器似乎都不兼容这个属性。（这个问题10年就有人问过了，这个属性也是够尬的😅）

字体变体相关属性

样式字体特性有两类：

  1. 影响字形形状与周围上下文的协调，如字距和连字特性。
  2. 影响形状选择的小大写、下标/上标和交替特性。

温馨提示：下文中出现的对应OpenType特性中的各种功能标记可在注册功能中查询具体信息。

font-variant-ligatures

font-variant-ligatures属性控制在其应用的元素的文本内容中使用哪些连字和上下文形式。

注意：不是连字符，而是像下面这样常见的连字，类似的还有ffi、th等： CSS字体相关属性

取值

关键字/值类型简介对应OpenType特性
none显式禁用此属性涵盖的所有类型的连字和上下文形式。-
normal指定启用通用默认功能。-
common-ligatures显示常见连字。liga、clig
no-common-ligatures禁用常见连字的显示。liga、clig
discretionary-ligatures显示任意连字。哪些连字可以自由使用，哪些是可选的由字体设计者决定。dlig
no-discretionary-ligatures禁用任意连字的显示。dlig
historical-ligatures显示历史连字。hlig
no-historical-ligatures禁用历史连字的显示。hlig
contextual显示上下文替代项。calt
no-contextual禁用上下文替代项的显示。calt

font-variant-position

font-variant-position属性控制定位为上标或下标的备用较小字形的使用。字形相对于字体的基线定位，通常用于<sub>和<sup>元素。

取值

关键字简介
sub允许显示下标变体。
super允许显示上标变体。
normal以上功能均未启用。

对于缺少给定字符的下标或上标字形的OpenType字体，用户代理会回退合成适当的下标和上标字形。

注意：由于一些限制，不建议在用户代理样式表中使用font-variant-position。应该在下标或上标只包含指定字体支持的很小范围的字符的情况下使用它。

font-variant-caps

font-variant-caps属性控制选择用于小写或小写字母或标题的备用字形。

取值

关键字简介对应OpenType特性
small-caps允许显示小型大写字母。smcp
all-small-caps允许大写字母转化为小型大写字母。c2sc、smcp
petite-caps允许将大小写字母全部转化为小型大写字母。pcap
all-petite-caps允许将大小写字母全部转化为小型大写字母。c2pc、pcap
unicase允许大写字母转化为小型大写字母与普通小写字母的混用。c2pc、pcap
titling-caps允许首字母大写。unic
normal以上功能均未启用。-

小型大写字母是字符选项的一种，这个选项比较特殊，就是大写字母在字号一样的情况下，与小写字母一样高，外形与原来保持一致。

font-variant-numeric

font-variant-numeric属性控制数字、分数和序号标记的备用字形的使用。

取值

关键字简介对应OpenType特性
lining-nums允许显示内衬数字。lnum
oldstyle-nums允许显示旧式数字。onum
proportional-nums允许显示比例数字。pnum
tabular-nums允许显示表格数字。tnum
diagonal-fractions允许显示内衬对角线分数。frac
stacked-fractions允许显示内衬堆叠分数。afrc
ordinal允许显示与序数一起使用的字母形式。ordn
slashed-zero允许显示斜线零。zero
normal以上功能均未启用。-

font-variant-alternates

对于任何给定的字符，除了该字符的默认字形外，字体还可以提供各种备选字形。font-variant-alternates属性提供对这些替代符号的选择的控制。

取值

关键字简介对应OpenType特性
historical-forms允许启用历史形式 。hist
stylistic(feature-value-name)允许显示旧式数字。salt
styleset(feature-value-name)允许显示比例数字。ss
character-variant(feature-value-name)允许显示表格数字。cv
swash(feature-value-name)允许显示内衬对角线分数。swsh
ornaments(feature-value-name)允许显示内衬堆叠分数。ornm
annotation(feature-value-name)允许显示与序数一起使用的字母形式。nalt
normal允许显示斜线零。-

feature-value-name是@font-feature-values规则的名称。

font-variant-east-asian

font-variant-east-asian属性控制东亚文本中的字形替换和大小调整。

取值

关键字简介对应OpenType特性
jis78允许使用jis78形式呈现。jp78
jis83允许使用JIS83形式呈现。jp83
jis90允许使用JIS90形式呈现。jp90
jis04允许使用JIS04形式呈现。jp04
simplified使用简体中文字形。smpl
traditional使用繁体中文字形。trad
full-width允许渲染全宽变体。fwid
proportional-width允许按比例间隔的变体的渲染。pwid
ruby允许显示Ruby变体字形。ruby
normal以上功能均未启用。-

font-variant-emoji

font-variant-emoji属性控制选择某些表情符号代码点时是使用表情符号表示还是文本表示。只影响Unicode列出的用于Unicode表情符号表示序列的代码点，对其他字符没有影响。，但可能会影响会影响字体回退。

取值

关键字简介
normal用户代理根据平台约定，选择以表情符号样式或文本样式绘制演示参与代码点。
text渲染表情符号，就像它正在使用 unicode 文本变体选择器 （U+FE0E)。
emoji呈现表情符号，就像它正在使用 unicode 表情符号变体选择器（U+FE0F)。
unicode根据表情符号表示属性呈现表情符号，如果存在U+FE0E或U+FE0F 变体选择器，则它将覆盖此值设置。

font-variant

font-variant属性允许设置字体的所有字体变体。它是以上字体变体相关子属性的简写。

取值

font-variant： normal | none | [font-variant-ligatures || font-variant-caps || font-variant-alternates || font-variant-numeric || font-variant-east-asian || font-variant-position || font-variant-emoji]

注意：如果font-variant值为none，相当于是将font-variant-ligatures的值设置为none，将其他手绘属性的值设置为normal值。

font-optical-sizing

font-optical-sizing属性设置文本渲染是否针对不同的尺寸进行优化。。

取值

关键字/值类型简介
auto用户代理可以根据屏幕的字体大小和像素密度修改字形的形状。
none用户代理不可以根据屏幕的字体大小和像素密度修改字形的形状。

在CFML4中规定：

当不是由字体直接执行光学大小时，用户代理不能合成光学大小。

用户代理不能为“opsz”轴选择不被用于呈现文本的字体所支持的值。这可以通过将选定值夹紧到字体支持的范围来实现。

font-optical-sizing与font-size-adjust（这个属性的兼容性简直......如果它兼容性好的话兼容性一定很好😜...有兴趣的话可以参考font-size-adjust，这里不过多说明，如果是未来可期的属性，就未来再说吧）相互作用。当应用光学尺寸时，用户代理必须应用与调整后的字体大小相适应的光学尺寸值，但要遵守上述限制。

font-variation-settings

font-variation-settings属性通过指定要更改的特征的四个字母轴名称及其值，提供提供对OpenType或TrueType字体变体的低级控制。

取值

关键字/值类型简介
normal文本使用默认设置进行布局。
string number呈现文本时，可变字体轴名称列表将传递到文本布局引擎以启用或禁用字体功能。每个设置始终是一对或多对，由4个ASCII字符的字符串（区分大小写）后跟一个数字组成，指示要设置的轴值。如果字符串包含更多或更少的字符，或者包含U+20 - U+7E代码点范围之外的字符，则整个属性无效。数字可以是小数或负数，具体取决于字体设计器定义的字体中可用的值范围。

注意：

  • 该属性不会影响要使用备用字体的字体选择，而使用同一轴的字体属性会对字体选择产生影响。

  • 通常情况下我们通常应该使用与字体变化相关的其他属性，仅在特殊情况下使用此属性，即它是访问特定不常用字体变化的唯一方法。

  • 4个ASCII字符的字符串只需要匹配字体中定义的轴标记，因此它们不局限于显式注册的OpenType/TrueType变量轴。定义自定义轴名的字体应该遵循OpenType规范中定义的名称规则。

  • 细节： CSS字体相关属性

  • 可以使用以下机制将font-variation-settings动画化。如果字体特征设置的两个声明相似，则它们之间可以动画化。相似声明是出现同一组属性的声明（以任何顺序）。

    因为应用的是连续的重复属性而不是先前的重复属性，所以即使两个声明具有不同数量的属性，它们也可以相似。如果两个声明是相似的，则动画在声明中的对应值之间成对发生。否则，动画是不可能的。在这种情况下，动画的from值在动画过程中未指定的时间被交换为to值。

    具体的动画应用或者该属性的使用示例可以查看突破限制，CSS font-variation 可变字体的魅力。

font

font属性用于设置与字体相关的多个属性。

font属性是font-style、font-variant、font-weight、font-stretch、font-size、line-height和font-family等属性的简写（上述各子属性的顺序也是在font属性指定各子属性时的顺序）。未指定的属性一致使用其默认值。

注意：

  • 必须包含font-family和font-size值。
  • 在font属性值可以包含font-variant和font-stretch，但font-variant只支持CSS 2.1；font-stretch只支持CSS 3。在 CSS Font Level 3和4中规定，font属性不包含font-variant。
  • 如果要指定font-style、font-variant和字体font-weight值，则必须位于font-size之前。
  • font-stretch只能是一个关键字值。
  • line-height必须紧跟font-size之后，写成font-size/line-height。如 16px / 3。
  • font-family必须是指定的最后一个值。

font的值还可以是单个系统字体名称，名称如下：

字体名称简介
caption带有标题的控件(例如，按钮，下拉菜单等)的字体。
icon标记图标的字体。
menu菜单中使用的字体(例如，下拉菜单和菜单列表)。
message-box对话框中使用的字体。
small-caption用于标记小控件的字体。
status-bar窗口状态栏中使用的字体。

系统字体只能作为一个整体设置，其字体族、大小、粗细、样式等都是同时设置的，并且只在第一个值位置有效。同时，系统字体只能用font属性指定，不能使用font-family。

font-feature-settings

font-feature-settings属性提供对OpenType字体特性的低级控制。

取值

关键字值简介
normal-文本使用默认设置进行布局。
feature-tag-valuestring/int number/on/off将feature-tag-value传递到文本布局引擎以启用或禁用字体功能。

feature-tag-value（OpenType 功能标记值）的值类型为string类型时，是区分大小写的OpenType功能标记，包含四个ASCII字符（可以参考上面的注册功能）。

值为整数时，必须大于等于0。值为0表示该功能已禁用。对于布尔特性，值为1则表示启用该特性。对于非布尔特性，值为1或更大将启用要素并指示要素选择索引。值on与1同义，off与0同义。如果省略该值，则默认值为1。

font-feature-settings不能设置的字体特性

上面字体变体相关属性能设置的OpenType特性，就不要使用font-feature-settings。原因如下：

  1. 高级属性单独级联。可以在不设置整个字体功能设置列表的情况下设置一个。
  2. 可以为不支持字体特性的字体合成一些高级属性。

font-kerning

font-kerning属性控制使用字体中包含的调整数据的度量字距。字距调整是对字形间距的上下文调整。对于不包含字偶间距调整数据的字体，将没有可见效果。

字偶间距，也叫做字距调整，是在字间距的基础上，为实现不同字偶（一对字符）可以有不同字间距的调整值。我们都知道，不同的字母外形不同，所以只有同样的字间距是不协调的。例如，“NA”间是标准的字间距，而“WA”由于W和A的形状可以重叠，所以需要负字偶间距才能达到协调一致的外观。 CSS字体相关属性 在大段落文字排版时，我们一般不需要更改字间距和字偶间距，因为字体设计师已经对他们做过了最优处理。在对一组字符单独设计时，就需要考虑字偶间距，以达到更协调的视觉效果。总的来说，字号越小，字距应当相对越大，行高也应该相对越大。反之亦然。

取值

关键字简介
none指定不应用字距调整。
normal指定应用字距调整。
auto由用户代理自动设置字距。

font-language-override

font-language-override属性允许作者显式指定字体的语言系统，重写内容语言隐含的语言系统。

取值

关键字/值类型简介
normal在使用OpenType字体呈现时，元素的内容语言用于推断OpenType语言系统。
string指定要使用的OpenType语言系统，而不是元素语言所隐含的语言系统。具体的值请查看语言系统标签。

值为string时，具体值参考上面字体变体相关属性的对应OpenType特性。未知的OpenType语言系统标记将被静默忽略，并且不会影响字形的选择和放置。

补充

全角和半角

全角和半角指的是输入的英文字母或数字的大小，全角输入的英文字母及数字是正常汉字的一半，全角输入的和正常汉字等大。一个汉字占两个英文字符的位置，一个英文字符所占的位置称为半角，把一个汉字所占的位置称为全角。

通常情况下，英文字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的，因为正常情况下没有打全角英文的需求。

在设计作品时也一定要记得中文搭配全角符号，英文使用半角符号。否则会出现诸如“你好.”或者“t h a n k s。”这样的错误。可按键盘capslock键切换全角和半角。这个小知识点虽然非常基础，却也是设计中经常出错的地方。

写在最后

在设计师必看的字体与排版应用指南中还包含了排版的CRAP原则、信噪比在设计中的作用等有助于提高字体与排版的章节，但由于篇幅过大这里就不过多说明了（膜拜大佬，深受启发👍）。

参考资料

转载自:https://juejin.cn/post/7242735049417392189
评论
请登录