文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS属性font-kerning怎么用

2024-04-02 19:55

关注

这篇文章主要为大家展示了“CSS属性font-kerning怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS属性font-kerning怎么用”这篇文章吧。

一、字距调整属性font-kerning

font-kerning应该算是一个CSS3属性,主要作用是调整字形间距,且基本上是英文字符形状的间距,因为英文字符形状都是不规则的,有宽有窄,有的圆乎乎,有的棱角分明,就会导致排列在一起的时候疏密不一致,而font-kerning可以有效利用字符形状间的间隙,使字形之间的空间更加相似,如下图所示(图来自MDN文档):

CSS属性font-kerning怎么用

语法如下:

font-kerning: auto | normal | none

其中:

但是,font-kerning并不是什么时候都有作用的。

  1. 一般中文是无效的,中文汉字本身就是方方正正,一般没有必要用到字距调整,除非是行书或者草书或者一些手写体字体。

  2. 必须是具有字距调整信息的OpenType字体才有用,如果字体文件没有字距调整信息或者不是OpenType字体,都是没效果的。

  3. IE浏览器,包括edge版本都是没效果的,iOS目前需要私有前缀。

    CSS属性font-kerning怎么用

① OpenType也叫Type 2字体,是由Microsoft和Adobe公司开发的另外一种字体格式。它也是一种轮廓字体,比TrueType更为强大,最明显的一个好处就是可以在把PostScript字体嵌入到TrueType的软件中。并且还支持多个平台,支持很大的字符集,还有版权保护。可以说它是Type 1和TrueType的超集。OpenType标准还定义了OpenType文件名称的后缀名。包含TureType字体的OpenType文件后缀名为.ttf,包含PostScript字体的文件后缀名为.OTF。如果是包含一系列TrueType字体的字体包文件,那么后缀名为.TTC

另外,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

-moz-osx-font-smoothing

按照我个人的使用经验来看,文字平滑属性font-smoothing在windows设备下好像都是打酱油的,各个属性值看不出差别,或许与显示器的设备像素比有关,在OS X设备下渲染有着明显的效果。

例如,在非retina屏幕下的iMac显示器的微软雅黑字体,粗得像倾国倾城中的“倾国”(下图左),使用-webkit-font-smoothing:antialiased,立马变成了“倾城”(下图右)。

CSS属性font-kerning怎么用 CSS属性font-kerning怎么用

于是,就有了如下的实践代码:

body { -webkit-font-smoothing: antialiased; }
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 2dppx){ body { -webkit-font-smoothing: subpixel-antialiased; }
}

当然,OS X下推荐苹方或者默认系统字体都是可以的,“微软雅黑”不是好选择。

三、小体型大写字母font-variant

font-variant是个IE6时代就过来的CSS属性,对于我们大中华用户,其支持的属性和作用让我们这些外来人觉得有些蛋疼,实现小体型大写字母,两个属性值,要么normal要么small-capsfont-variant:small-caps就是可以让英文字符表现为小体型大写字母。

如下代码示意:

http://www.<span style="font-variant:small-caps">zhangxinxu.com<span>/wordpress/?p=5974

结果下面这样:

http://www.zhangxinxu.com/wordpress/?p=5974

也就是大小跟小写字母一样,但样式是大写。但我实在搞不懂这种字符设置在什么场景下会使用呢?

然后,进入了CSS3的时代后,原本单一的font-variant属性迎来了全面升级,变成了一种缩写格式,并且是下面这些属性的缩写: font-variant-capsfont-variant-numericfont-variant-alternatesfont-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属性font-kerning怎么用

我简单了解了下,发现这里面的水好深好深,涉及到字体字形设计和各种字符表现等等,比方说下面这段CSS语句你知道什么意思吗?

   font-feature-settings: "dlig=1,ss01=1";

多半大眼瞪小眼,所以,本文就不囫囵介绍了,以后时机成熟再专门深入介绍。

总之,大家知道如今的font-variant已经不是当年的小白菜就可以了。

四、结束语

从我整理本文相关知识的过程中,发现有个东西出现的频率很高(虽然文中提及频率并不高),那就是OpenType fonts,貌似很多新的font相关的CSS属性的表现和渲染都和OpenType fonts有密切关系,之前看相关文档草案的时候,也有相当相当大的篇幅将字体相关很多深入的细节。

让我觉得在文本字体渲染和呈现这一块,水非常深,目前所出来的这些东西应该才刚刚开始个头,以后要学习和要深入的东西就多了。

但是,也不一定,为什么这么说呢?指定规范的都是老外,使用的使用英文,很多规则说不定对于汉字并不适用,就好比font-variant:small-caps,我们也就看看两眼,实际项目使用的概率跟年会中奖概率是一样低的。

以上是“CSS属性font-kerning怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯