Nicander知识小站

Appearance

​

font-family属性可以为<font style="color:#1890FF;">default font</font>

通用字体 ​

​

****

​

什么是Fallback 机制？给个图文说明，一看就懂

css
font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;

这个 fallback 的规则可以总结为
(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'
就这样一直找匹配的字体，直到系统默认，所以一般都把系统默认的5类字体放到 font-family 定义的最后来写

​

Web Font 技术的出现使得用户可以使用自定义的字体（比如 Alibaba PuHui体）
1、兼容性
WebFont 技术支持的常见文件格式有以下几种：
EOT, TTF/OTF, WOFF, WOFF2, SVG
别问我为什么这么多格式，各家浏览器干的好事，想知道各个格式的兼容问题，可以戳一下👉 caniuse.com

2、css通用写法
好了，了解了兼容性问题，那下面的通用写法一看就懂了

css
@font-face { 
    font-family: <font-name>; 
    src: <local/url> <format>,[…]; 
    font-weight: <font-weight>; 
    font-style: <font-style>; 
    font-stretch: <font-stretch>; 
    unicode-range:<unicode-range>;
}

.text { font-family: '<font-name>';}

3、自定义字体性能优化

由于汉字相较于英文字母（26个）的数量多了很多，在我们的系统是直接引入汉字的字体（比如阿里巴巴普惠体），由于字体文件体积较大，会对网页性能造成较大的影响，推荐使用FontMin字体子集化方案，只提取页面需要的汉字进行加载。

2、字体样式 ​

字体大小 font-size ​

font-size的取值单位有：

  • ：

​

<font style="color:rgb(51, 51, 51);"> font-weight </font>下面是一些常见粗细值名称及其对应的数值

数值粗细值名称
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600SemiBold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)

font-weight回退机制 ​

````，浏览器是如何解决的呢？没错，就是靠字重的回退机制去解决。

如果指定的权重值在 400和 500之间（包括400和500）：

  • 按升序查找指定值与500之间的可用权重;
  • 如果未找到匹配项，按降序查找小于指定值的可用权重；
  • 如果未找到匹配项，按升序查找大于500的可用权重。

如果指定值小于****400

  • 按降序查找小于指定值的可用权重。 如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。

如果指定值大于500，

  • 按升序查找大于指定值的可用权重。 如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。

text-transform ​

text-decoration ​

​

文本对齐 text-align ​

​

单词间距 word-spacing ​

​

css
{
	font-family: "Microsoft YaHei","微软雅黑","San Francisco UI","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif;
}