font-variant-east-asian属性(CSS设置)
font-variant-east-asian属性(CSS设置)
了解几个或许平时用得不太多，长得不太熟的font相关的几个CSS特点，分别是：font-kerning,font-smoothing和font-variant。
字距调整特点font-kerning
font-kerning应该算是一个CSS3特点，首要作用是调整字形间距，且基本上是英文字符形状的间距，因为英文字符形状都是不规则的，有宽有窄，有的圆乎乎，有的棱角清楚，就会导致摆放在一起的时分疏密不一致，而font-kerning能够有用运用字符形状间的空隙，使字形之间的空间愈加类似，如下图所示（图来自MDN文档）：
这儿写图片描述
语法如下：
font-kerning:auto|normal|none
1
其间：
auto
默许值。浏览器自己决议是否要字距调整。例如字号，也便是font-size特点值比较小的时分，如果进行字距调整就会显得很奇怪，因而，浏览器会制止。
normal
应用字距调整。
none
不依据字体文件中的字距信息进行字距调整。
但是，font-kerning并不是什么时分都有作用的。
一般中文是无效的，中文汉字自身便是方方正正，一般没有必要用到字距调整，除非是行书或许草书或许一些手写体字体。
必须是具有字距调整信息的OpenType字体才有用，如果字体文件没有字距调整信息或许不是OpenType字体，都是没作用的。
IE浏览器，包括edge版别都是没作用的，iOS现在需求私有前缀。
别的，font-kerning的字距调整并不是一切字符都有用的，如果希望一切字符间距都有调整，应该运用CSS特点letter-spacing，这个我们应该比较熟。
文字滑润特点font-smoothing
font-smoothing决议了浏览器如何控制字体不要出现锯齿，因为浏览器中字体出现的作用或许和规划软件中的有出入，MDN文档上显现这个特点应该名叫font-smooth，什么鬼？成果是非标准的，成果没有一个浏览器用这个名字，给人感觉font-smooth这个特点名应该是YY出来的吧，实践是，是老的W3C的提案曾有关于font-smooth的内容！
实践上，Chrome等webkit浏览器运用的是-webkit-font-smoothing，Firefox浏览器下是-moz-osx-font-smoothing，
相关语法和含义如下：
-webkit-font-smoothing：none|antialiased|subpixel-antialiased
1
none
关闭抗锯齿，字体边缘犀利。
antialiased
字体像素级滑润，在深色布景上会让文字看起来更细了。
subpixel-antialiased
字体亚像素级滑润，首要为了在非视网膜设备下更好的显现。
-moz-osx-font-smoothing：auto|grayscale
1
auto
览器只能挑选字体烘托体现。
grayscale
webkit下的”antialiased”，能够让深色布景下的文字看起来更细。
依照我个人的运用经历来看，文字滑润特点font-smoothing在windows设备下好像都是打酱油的，各个特点值看不出差别，或许与显现器的设备像素比有关，在OSX设备下烘托有着明显的作用。
例如，在非retina屏幕下的iMac显现器的微软雅黑字体，粗得像倾国倾城中的“倾国”（下图左），运用-webkit-font-smoothing:antialiased，立马变成了“倾城”（下图右）。
这儿写图片描述这儿写图片描述
所以，就有了如下的实践代码：
body{-webkit-font-smoothing:antialiased;}
@media
(-webkit-min-device-pixel-ratio:1.5),
(min-resolution:2dppx){/*Retina下仍运用默许字体烘托*/body{-webkit-font-smoothing:subpixel-antialiased;}
}
当然，OSX下推荐苹方或许默许体系字体都是能够的，“微软雅黑”不是好挑选。
小体型大写字母font-variant
font-variant是个IE6时代就过来的CSS特点，对于咱们大中华用户，其支撑的特点和作用让咱们这些外来人觉得有些蛋疼，实现小体型大写字母，两个特点值，要么normal要么small-caps，font-variant:small-caps便是能够让英文字符体现为小体型大写字母。
如下代码暗示：
http://www.<spanstyle="font-variant:small-caps">zhangxinxu.com<span>/wordpress/?p=5974
1
成果下面这样：
http://www.zhangxinxu.com/wordpress/?p=5974
也便是大小跟小写字母相同，但款式是大写。但我真实搞不懂这种字符设置在什么场景下会运用呢？
然后，进入了CSS3的时代后，原本单一的font-variant特点迎来了全面升级，变成了一种缩写格局，并且是下面这些特点的缩写：font-variant-caps,font-variant-numeric,font-variant-alternates,font-variant-ligatures,以及font-variant-east-asian。
立马变得很厉害的样子。
比方说随便拎一个font-variant-alternates特点，其语法是这样的：
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);
吓得我喝水都呛到了，支撑的特点值多到没什么，但是搞这么多不认识的单词是闹那样，而且还是函数体。好在现在就Firefox浏览器支撑比较high，咱学习能够缓一缓。
但是，貌似和font-variant有密切关系的font-feature-settings特点的浏览器兼容性就彻底不相同了，现已绿油油到家门口啦！
这儿写图片描述
我简略了解了下，发现这儿面的水好深好深，涉及到字体字形规划和各种字符体现等等，比方说下面这段CSS句子你知道什么意思吗？
/*format:feature-tag=[0,1]with0todisable,1toenable*/
/*dlig=discretionaryligatures,ss01=stylisticset1*/
font-feature-settings:"dlig=1,ss01=1";
八成大眼瞪小眼。
总归，我们知道现在的font-variant现已不是当年的小白菜就能够了。
作品标签：
优秀作品：
评论列表（共75人参与）参与讨论或分享设计作品获得视觉癖积分奖励
怎么做海报注册会员
2021-08-28 1:46:42
一天都是母亲节。希望母亲能天天高兴，日日美好! 4、满意时，母亲不一定在我身边和我一起分享成功的喜悦;失意时，母亲一定在我身边，用鼓舞及安慰让我在阖家欢喜人团圆，日子夸姣又美满。 4.送你一轮圆圆的月，怀念为圆心
回复：htt注册会员
2021-08-28 13:53:55
详解,HTM游客
2021-08-28 19:39:2
游客85172：font-variant-ea是多么得甜美呀，甜得你睡不着觉。由于我爱上了你，我正享受这种甜美呢，齁死我了呀!哈哈! 7.暖暖的阳光照耀你，柔柔的清风抚摸你，阵阵的细雨呼唤你，静静的夜里在想你，情ng> 动漫绘画教程
回复
