font-family指定字族名称或通用族名称的优先级列表。
族类就是不同字体类型,例如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。而这些众多字体又可分为衬线体和无衬线体。
基本字族包括细体、标准、粗体、斜体,值得注意的是,斜体字常用在引用文本上,代表“本段文字引用的是另一个著作”的含义。
通用字族名称表如下:
注意:
font-weight属性设置字体的粗细或粗体(字重)。
根据CSSFontsModuleLevel4规范(以下简称CFML4),相对粗细相对于父元素font-weight的粗细如下表:
一般都有细体、正常、粗体三种基本字族。在应用场景上,通常细体多用于超大号字体;「正常」用于正文内容;「粗体」表示强调,多用于标题。
知识点:在进行界面设计时,不要用软件自带的文本加粗,它不仅破坏了字体本身的美感,还改变了文字原本的字宽,小字体下会模糊不清,合理的方式是使用字体本身的字重来控制粗细。
字重超细的字体要谨慎使用。如果你设计的文本是装饰性倒还好,如果是需要用户能清晰阅读的,就要特别慎重,能不用就不用,否则在部分低分辨率的手机屏幕上看起来会非常糟糕。
绝对大小关键字与正常字体大小的比例:
我们在做设计时,字号的单位最好使用一个基数作为倍增,如2、4、6、8、10或者3、6、9、12。但其实我们在做移动端设计时,单位需要遵循偶数原则,因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中,使用2为单位会导致字号过多,且2号字体的差异化不大。所以在字号方面我们使用4作为单位是比较合适的:一是适配后在@2x跟@3x不会出现半像素,二是使用4为单位,能满足字体大小的均衡。
font-style属性用于选择当前字体的正常或者斜体样式。斜体字体本质上通常是草体,比无样式字体使用更少的水平空间。
对于oblique[angle[anglerange]],可以参考MDN的描述:
如果所选字体族中有一个或多个斜面可用,则会选择与指定角度最匹配的斜面。如果没有可用的倾斜面,浏览器将通过将正常面倾斜指定的量来合成字体的倾斜版本。有效值是-90deg到90deg的度数值(包括-90deg和90deg)。如果未指定角度,则使用14度的角度。正值倾斜到线的末端,而负值倾斜到线的开始。
通常,对于14度或更大的所需角度,优选更大的角度;否则,更小的角度是首选的。
注意:如果oblique不可用,会回退到italic字体。
font-synthesis属性控制浏览器可以合成哪些缺失的字体(粗体、斜体或小大写)。在需要用到font-family的某个字体,但这个字体不存在时,就可以通过这个属性控制用户代理是否合成对应的字体。
比如设置了font-style:italic;但是font-family指定的字体当中没有斜体字体,那么就可以通过font-synthesis:style;让用户代理去合成斜体字体。
简单了解一下这三个属性:分别表示当缺少粗体、斜体和小型大写字体时,是否控制浏览器合成对应的字体,其取值均为auto和none。
大多数标准西方字体包括斜体和粗体变体,某些字体包括小写字母变体。但是用于中文、日文、韩文和其他标文的字体往往不包含这些变体,合成它们可能会影响文本的易读性。可以关闭浏览器的默认字体合成。
font-stretch属性用于从font-family中选择正常的、压缩的或拉伸(横向)的字体。
值为百分比时不允许为负,其中关键字值与百分比值的对应关系如下:
与font-weight属性类似,为font-stretch的值由font-family决定。如果font-family指定的字体没有完全匹配的值的字体时,font-stretch小于100%的值映射到较窄的面,大于或等于100%的值映射到较宽的面。
注意:该属性生效的前提是字族中有压缩或拉伸的字体。
样式字体特性有两类:
font-variant-ligatures属性控制在其应用的元素的文本内容中使用哪些连字和上下文形式。
对于缺少给定字符的下标或上标字形的OpenType字体,用户代理会回退合成适当的下标和上标字形。
注意:由于一些限制,不建议在用户代理样式表中使用font-variant-position。应该在下标或上标只包含指定字体支持的很小范围的字符的情况下使用它。
font-variant-caps属性控制选择用于小写或小写字母或标题的备用字形。
小型大写字母是字符选项的一种,这个选项比较特殊,就是大写字母在字号一样的情况下,与小写字母一样高,外形与原来保持一致。
font-variant-numeric属性控制数字、分数和序号标记的备用字形的使用。
对于任何给定的字符,除了该字符的默认字形外,字体还可以提供各种备选字形。font-variant-alternates属性提供对这些替代符号的选择的控制。
font-variant-east-asian属性控制东亚文本中的字形替换和大小调整。
font-variant-emoji属性控制选择某些表情符号代码点时是使用表情符号表示还是文本表示。只影响Unicode列出的用于Unicode表情符号表示序列的代码点,对其他字符没有影响。,但可能会影响会影响字体回退。
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属性设置文本渲染是否针对不同的尺寸进行优化。。
在CFML4中规定:
当不是由字体直接执行光学大小时,用户代理不能合成光学大小。
用户代理不能为“opsz”轴选择不被用于呈现文本的字体所支持的值。这可以通过将选定值夹紧到字体支持的范围来实现。
font-variation-settings属性通过指定要更改的特征的四个字母轴名称及其值,提供提供对OpenType或TrueType字体变体的低级控制。
font属性是font-style、font-variant、font-weight、font-stretch、font-size、line-height和font-family等属性的简写(上述各子属性的顺序也是在font属性指定各子属性时的顺序)。未指定的属性一致使用其默认值。
font的值还可以是单个系统字体名称,名称如下:
系统字体只能作为一个整体设置,其字体族、大小、粗细、样式等都是同时设置的,并且只在第一个值位置有效。同时,系统字体只能用font属性指定,不能使用font-family。
font-feature-settings属性提供对OpenType字体特性的低级控制。
值为整数时,必须大于等于0。值为0表示该功能已禁用。对于布尔特性,值为1则表示启用该特性。对于非布尔特性,值为1或更大将启用要素并指示要素选择索引。值on与1同义,off与0同义。如果省略该值,则默认值为1。
font-kerning属性控制使用字体中包含的调整数据的度量字距。字距调整是对字形间距的上下文调整。对于不包含字偶间距调整数据的字体,将没有可见效果。
font-language-override属性允许作者显式指定字体的语言系统,重写内容语言隐含的语言系统。
全角和半角指的是输入的英文字母或数字的大小,全角输入的英文字母及数字是正常汉字的一半,全角输入的和正常汉字等大。一个汉字占两个英文字符的位置,一个英文字符所占的位置称为半角,把一个汉字所占的位置称为全角。
通常情况下,英文字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的,因为正常情况下没有打全角英文的需求。
在设计作品时也一定要记得中文搭配全角符号,英文使用半角符号。否则会出现诸如“你好.”或者“thanks。”这样的错误。可按键盘capslock键切换全角和半角。这个小知识点虽然非常基础,却也是设计中经常出错的地方。