了解CSS属性font-kerning,font-smoothing,font-variant

Jean 5年前
   <p>本文很简单,了解几个可能平时用得不太多,长得不太熟的 font 相关的几个CSS属性,分别是: font-kerning , font-smoothing 和 font-variant 。</p>    <h3>一、字距调整属性font-kerning</h3>    <p>font-kerning 应该算是一个CSS3属性,主要作用是调整字形间距,且基本上是英文字符形状的间距,因为英文字符形状都是不规则的,有宽有窄,有的圆乎乎,有的棱角分明,就会导致排列在一起的时候疏密不一致,而 font-kerning 可以有效利用字符形状间的间隙,使字形之间的空间更加相似,如下图所示:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ea1e41cccdda5343bd336cf6dcd27c92.png"></p>    <p>语法如下:</p>    <pre>  <code class="language-css">font-kerning: auto | normal | none</code></pre>    <p>其中:</p>    <p>auto</p>    <p>默认值。浏览器自己决定是否要字距调整。例如字号,也就是 font-size 属性值比较小的时候,如果进行字距调整就会显得很奇怪,因此,浏览器会禁止。</p>    <p>normal</p>    <p>应用字距调整。</p>    <p>none</p>    <p>不根据字体文件中的字距信息进行字距调整。</p>    <p>但是, font-kerning 并不是什么时候都有作用的。</p>    <ol>     <li>一般中文是无效的,中文汉字本身就是方方正正,一般没有必要用到字距调整,除非是行书或者草书或者一些手写体字体。</li>     <li>必须是具有字距调整信息的OpenType字体 <sup>①</sup> 才有用,如果字体文件没有字距调整信息或者不是OpenType字体,都是没效果的。</li>     <li>IE浏览器,包括edge版本都是没效果的,iOS目前需要私有前缀。 <p style="text-align:center"><img src="https://simg.open-open.com/show/51f331eb75c77940b6939c92c20a8354.png"></p> </li>    </ol>    <p>① OpenType也叫Type 2字体,是由Microsoft和Adobe公司开发的另外一种字体格式。它也是一种轮廓字体,比TrueType更为强大,最明显的一个好处就是可以在把PostScript字体嵌入到TrueType的软件中。并且还支持多个平台,支持很大的字符集,还有版权保护。可以说它是Type 1和TrueType的超集。OpenType标准还定义了OpenType文件名称的后缀名。包含TureType字体的OpenType文件后缀名为 .ttf ,包含PostScript字体的文件后缀名为 .OTF 。如果是包含一系列TrueType字体的字体包文件,那么后缀名为 .TTC 。</p>    <p>另外, font-kerning 的字距调整并不是所有字符都有效的,如果希望所有字符间距都有调整,应该使用CSS属性 letter-spacing ,这个大家应该比较熟。</p>    <p>更多关于字距调整调整的信息,可以参考下面几篇文章:</p>    <ul>     <li><a href="/misc/goto?guid=4959738811176273389" rel="nofollow,noindex">Advanced web typography: Kerning</a> by Elliot Jay Stocks</li>     <li><a href="/misc/goto?guid=4959738811274226836" rel="nofollow,noindex">Kerning on the Web</a> by Bram Stein</li>     <li><a href="/misc/goto?guid=4959738811373633792" rel="nofollow,noindex">A Manual Kerning Method for the Web</a> by Nathan Ford</li>    </ul>    <h3>二、文字平滑属性font-smoothing</h3>    <p>font-smoothing 决定了浏览器如何控制字体不要出现锯齿,因为浏览器中字体呈现的效果可能和设计软件中的有出入, MDN文档 上显示这个属性应该名叫 font-smooth ,什么鬼?结果是非标准的,结果没有一个浏览器用这个名字,给人感觉 font-smooth 这个属性名应该是YY出来的吧,实际是,是 老的W3C的提案 曾有关于 font-smooth 的内容!</p>    <p>实际上,Chrome等webkit浏览器使用的是 -webkit-font-smoothing ,Firefox浏览器下是 -moz-osx-font-smoothing ,</p>    <p>相关语法和含义如下:</p>    <p>-webkit-font-smoothing</p>    <p>none</p>    <p>关闭抗锯齿,字体边缘犀利。</p>    <p>antialiased</p>    <p>字体像素级平滑,在深色背景上会让文字看起来更细了。</p>    <p>subpixel-antialiased</p>    <p>字体亚像素级平滑,主要为了在非视网膜设备下更好的显示。</p>    <p>-moz-osx-font-smoothing</p>    <p>auto</p>    <p>览器只能选择字体渲染表现。</p>    <p>grayscale</p>    <p>webkit 下的 "antialiased" ,可以让深色背景下的文字看起来更细。</p>    <p>按照我个人的使用经验来看,文字平滑属性 font-smoothing 在windows设备下好像都是打酱油的,各个属性值看不出差别,或许与显示器的设备像素比有关,在OS X设备下渲染有着明显的效果。</p>    <p>例如,在非retina屏幕下的iMac显示器的微软雅黑字体,粗得像倾国倾城中的“倾国”(下图左),使用 -webkit-font-smoothing:antialiased ,立马变成了“倾城”(下图右)。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/71ed741a0dd33f5578fd5886cfcce013.jpg"> <img src="https://simg.open-open.com/show/9fb2e0202dd7bf9d4aeb0c6a2a09d340.jpg"></p>    <p>于是,就有了如下的实践代码:</p>    <pre>  <code class="language-css">body { -webkit-font-smoothing: antialiased; }  @media   (-webkit-min-device-pixel-ratio: 1.5),   (min-resolution: 2dppx){       /* Retina下仍使用默认字体渲染 */      body { -webkit-font-smoothing: subpixel-antialiased; }  }</code></pre>    <p>当然,OS X下推荐苹方或者默认系统字体都是可以的,“微软雅黑”不是好选择。</p>    <h3>三、小体型大写字母font-variant</h3>    <p>font-variant 是个IE6时代就过来的CSS属性,对于我们大中华用户,其支持的属性和作用让我们这些外来人觉得有些蛋疼,实现小体型大写字母,两个属性值,要么 normal 要么 small-caps , font-variant:small-caps 就是可以让英文字符表现为小体型大写字母。</p>    <p>如下代码示意:</p>    <pre>  <code class="language-css">http://www.<span style="font-variant:small-caps">zhangxinxu.com<span>/wordpress/?p=5974</code></pre>    <p>结果下面这样:</p>    <p>http://www. zhangxinxu.com /wordpress/?p=5974</p>    <p>也就是大小跟小写字母一样,但样式是大写。但我实在搞不懂这种字符设置在什么场景下会使用呢?</p>    <p>然后,进入了CSS3的时代后,原本单一的 font-variant 属性迎来了全面升级,变成了一种缩写格式,并且是下面这些属性的缩写: font-variant-caps , font-variant-numeric , font-variant-alternates , font-variant-ligatures , 以及 font-variant-east-asian 。</p>    <p>立马变得很厉害的样子。</p>    <p>比方说随便拎一个 font-variant-alternates 属性,其语法是这样的:</p>    <pre>  <code class="language-css">font-variant-alternates: normal;  font-variant-alternates: historical-forms;  font-variant-alternates: stylistic(user-defined-ident);  font-variant-alternates: styleset(user-defined-ident);  font-variant-alternates: character-variant(user-defined-ident);  font-variant-alternates: swash(user-defined-ident);  font-variant-alternates: ornaments(user-defined-ident);  font-variant-alternates: annotation(user-defined-ident);  font-variant-alternates: swash(ident1) annotation(ident2);</code></pre>    <p>吓得我喝水都呛到了,支持的属性值多到没什么,但是搞这么多不认识的单词是闹那样,而且还是函数体。好在目前就Firefox浏览器支持比较high,咱学习可以缓一缓。</p>    <p>但是,貌似和 font-variant 有密切关系的 font-feature-settings 属性的浏览器兼容性就完全不一样了,已经绿油油到家门口啦!</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/55d6ab86c38706eb419fc9d97e7a9087.png"></p>    <p>我简单了解了下,发现这里面的水好深好深,涉及到字体字形设计和各种字符表现等等,比方说下面这段CSS语句你知道什么意思吗?</p>    <pre>  <code class="language-css">/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */    /* dlig = discretionary ligatures, ss01 = stylistic set 1 */  font-feature-settings: "dlig=1,ss01=1";</code></pre>    <p>多半大眼瞪小眼,所以,本文就不囫囵介绍了,以后时机成熟再专门深入介绍。</p>    <p>总之,大家知道如今的 font-variant 已经不是当年的小白菜就可以了。</p>    <h3>四、结束语</h3>    <p>从我整理本文相关知识的过程中,发现有个东西出现的频率很高(虽然文中提及频率并不高),那就是 OpenType fonts ,貌似很多新的 font 相关的CSS属性的表现和渲染都和 OpenType fonts 有密切关系,之前看相关文档草案的时候,也有相当相当大的篇幅将字体相关很多深入的细节。</p>    <p>让我觉得在文本字体渲染和呈现这一块,水非常深,目前所出来的这些东西应该才刚刚开始个头,以后要学习和要深入的东西就多了。</p>    <p>但是,也不一定,为什么这么说呢?指定规范的都是老外,使用的使用英文,很多规则说不定对于汉字并不适用,就好比 font-variant:small-caps ,我们也就看看两眼,实际项目使用的概率跟年会中奖概率是一样低的。</p>    <p>要不,就说这么多,日后等知识积累足够,再深入这些或其他 font 相关CSS属性值。</p>    <p> </p>    <p> </p>    <p>来自:http://www.zhangxinxu.com/wordpress/2017/02/font-kerning-font-smoothing-font-variant/</p>    <p> </p>