了解CSS属性font-kerning,font-smoothing,font-variant
本文很简单,了解几个可能平时用得不太多,长得不太熟的font相关的几个CSS属性,分别是:font-kerning, font-smoothing和font-variant。
字距调整属性font-kerning
font-kerning应该算是一个CSS3属性,主要作用是调整字形间距,且基本上是英文字符形状的间距,因为英文字符形状都是不规则的,有宽有窄,有的圆乎乎,有的棱角分明,就会导致排列在一起的时候疏密不一致,而font-kerning可以有效利用字符形状间的间隙,使字形之间的空间更加相似,如下图所示(图来自MDN文档):
语法如下:
font-kerning: auto | normal | none
其中:
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
none
关闭抗锯齿,字体边缘犀利。
antialiased
字体像素级平滑,在深色背景上会让文字看起来更细了。
subpixel-antialiased
字体亚像素级平滑,主要为了在非视网膜设备下更好的显示。
-moz-osx-font-smoothing:auto|grayscale
auto
览器只能选择字体渲染表现。
grayscale
webkit下的”antialiased”,可以让深色背景下的文字看起来更细。
按照我个人的使用经验来看,文字平滑属性font-smoothing在windows设备下好像都是打酱油的,各个属性值看不出差别,或许与显示器的设备像素比有关,在OS X设备下渲染有着明显的效果。
例如,在非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; }
}
当然,OS X下推荐苹方或者默认系统字体都是可以的,“微软雅黑”不是好选择。
小体型大写字母font-variant
font-variant是个IE6时代就过来的CSS属性,对于我们大中华用户,其支持的属性和作用让我们这些外来人觉得有些蛋疼,实现小体型大写字母,两个属性值,要么normal要么small-caps,font-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-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] with 0 to disable, 1 to enable *//* dlig = discretionary ligatures, ss01 = stylistic set 1 */
font-feature-settings: "dlig=1,ss01=1";
多半大眼瞪小眼。
总之,大家知道如今的font-variant已经不是当年的小白菜就可以了。
了解CSS属性font-kerning,font-smoothing,font-variant相关推荐
- CSS属性之字体(Font)
CSS属性之字体(Font) font:[ [ "| || ]? [ / ]? ] 复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变, ...
- GameFramework篇:Font texture for dynamic font MainFont is missing. Please reimport the Font. All dyna
在打完AB包,运行时出现了Font texture for dynamic font MainFont is missing. Please reimport the Font. All dynami ...
- python中font的用法_Python font.nametofont方法代码示例
本文整理汇总了Python中tkinter.font.nametofont方法的典型用法代码示例.如果您正苦于以下问题:Python font.nametofont方法的具体用法?Python fon ...
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- 前端笔记(7)css属性书写顺序,布局流程,chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序 布局流程 chrome调试工具 css属性书写顺序 布局定位属性 display / position / float / clear / visi ...
- 常见的CSS属性和值CascadingStyleSheets
字体 文本 背景 位置 边框 列表 其他 CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等, ...
- 050_学习的CSS属性
1. 尺寸属性(Dimension) height: 设置元素高度. max-height: 设置元素的最大高度. max-width: 设置元素的最大宽度. min-height: 设置元素的最小高 ...
- canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...
- html怎么制作附页,HTML和CSS属性的正确书写规范
网页的重要性评级: 1. 网页的排名. 2. 标签的语义化,正确的标签做正确的事情. 3. 提升网页的加载速度.1. CSS代码优化,代码的正确排列顺序,不正确的代码会导致浏览器解析代码回流,会拖慢浏 ...
最新文章
- 独家 | ​多项式回归:从零开始学习梯度下降
- hive 安装_7.Hive介绍以及安装
- xhtml代码 中<pre>元素简单介绍
- vim normal 模式下L键
- windows 操作系统里 git bash 和 git cmd 的区别
- DICOM的常用Tag分类和说明
- 北京林业大学计算机科学与技术考研科目,北京林业大学计算机科学与技术考研经验-北林信息学院考研辅导班...
- 位运算之左移右移运算之详解
- (11)FPGA复位设计原则
- 《深入理解 Spring Cloud 与微服务构建》第十八章 使用 Spring Security OAuth2 和 JWT 保护微服务系统
- 光驱安装centos7系统过程_centos7可以ping通外网_可以ping通内网其他机器_但是其他机器就是ping不通centos7_太神奇了---linux工作笔记041
- 腾讯云联合信通院等发布标准物模型平台,构建物联网行业通用标准
- android 获取快捷开关_6款快捷开关式实用安卓小插件推荐 简化Android设备操作
- 网络音视频下载小套路-dy、xmly
- 大一c语言程序课程报告,大一C语言课程设计.doc
- excle报盘之导入报盘
- [BBS 水木清华站]给Linux新手
- google输入法PK搜狗输入法
- 投资理财-朋友好像的故事
- 【bean的生命周期】--- BeanDefinition和BeanFactoryPostProcessor简介
热门文章
- linux 搜狗输入法 太慢,【分享】ibus使用搜狗输入法词库后,反应慢的解决方法...
- python3 jason 、pickle 和cpickle
- Altium Designer 17 新手入门详细教程
- 安卓开发SDK等工具下载地址
- XX健康:移动端开发-体检预约设计和实现微信公众号注册阿里短信服务
- PHP通过HTTP_USER_AGENT判断是否为手机移动终端的函数
- Android数据存储安全实践
- KMP —— 字符串分析算法
- dell最新计算机如何U盘引导,2018戴尔最新版电脑bios设置u盘启动教程
- Arduino Mega2560 PWM