简写属性
font: [[<font-style> || [normal | small-caps] || <font-weight>]? <font-size> [/<line-height>]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar
初始值:font-style:normal,font-weight:normal,font-size:medium,line-height:1
举例:font: italic normal bold 1.5rem/1.2 Verdana, Helvetica, Arial, sans-serif;
-
在最大的
[]
里除了font-size
和font-family
,其余属性都是可选的 -
若直接使用简写形式,那么省略的属性会采用默认值,相当于完整的写了一遍font的所有属性,可能会对想要继承的属性有影响
-
在最大的
[]
外的属性值可以让字体设置成操作系统字体值button { font: caption; } /* 按钮的字体和操作体统中的按钮一样 */ /* caption:用于说明文字的控件(如按钮)、 icon:标注图标、 menu:下拉菜单和菜单列表、 message-box:对话框、 small-caption:标注小型控件、 status-bar:窗口的状态栏 */
字体族
css定义了5种通用的字体族:衬线字体族、无衬线字体族、等宽字体族、手写字体族、奇幻字体族。有一篇文章清楚地讲述了字体族的特点和区别:五类字体serif,sans-serif,monospace,cursive和fantasy
-
在
font-family
属性中使用通用字体族(serif, sans-serif,monospace,cursive,fantasy),那就会依赖浏览器默认的字体(当然这个字体属于你选择的通用字体族) -
在指定的字体名称后面添加类似效果的字体名称或通用字体族,确保该字体失效还能有类似的字体替代,不然会采用系统默认字体
-
如果字体名称有空格,应使用引号(这点不是强制的),但如果字体名与关键字(可能是字体族)冲突,那就一定要用引号
body { font-family: serif; font-family: Georgia, serif; font-family: Times, 'Times New Roman', Georgia, 'New York', serif; font-family: 'cursive', cursive; }
使用@font-face:自定义字体
@font-face {
/* 必须的描述属性,font-family和src,一个指定被引用时的名称,一个指定字体资源的链接 */
font-family: <family-name>;
src: [[<uri>[format(<string>#)]?]|<font-face-name>]#;
/* 其他描述 */
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-feature-settings: normal;
unicode-range: U+0-10FFFF;
}
-
在
@font-face
使用的属性值仅作为描述作用,不能改变字体的样式,比如:一款自定义字体有不同属性(粗细、字宽等),被引用时通过描述区分/* 正常字型 */ @font-face { font-family: 'SwitzeraADF'; src: url('SwitzeraADF-Regular.otf') format('opentype'); font-weight: normal; } /* 粗体字型 */ @font-face { font-family: 'SwitzeraADF'; src: url('SwitzeraADF-Bold.otf') format('opentype'); font-weight: bold; }
-
@font-face
是惰性加载字型的,需要用到的时候才会加载;但浏览器不管是否需要都会全部下载缓存 -
使用
@font-face
可以自定义网页上的字体,如果字体资源失效或格式不被浏览器支持,文本会使用备用的字体显示 -
不同时代的不同浏览器支持的字体格式可能不同,可以使用下面的模版做到兼容(其余属性采用默认):
@font-face { font-family: 'SwitzeraADF'; src: url('SwitzeraADF-Regular.eot'); /* 针对ie9 */ src: url('SwitzeraADF-Regular.eot?#iefix') format('embedded-opentype'), /* 针对ie6~ie8 */ url('SwitzeraADF-Regular.woff') format('woff'), /* 针对多数现代桌面浏览器 */ url('SwitzeraADF-Regular.ttf') format('truetype'), /* 针对ios和android设备 */ url('SwitzeraADF-Regular.svg#switzera_adf_regular') format('svg'); /* 针对旧款的ios设备 */ }
-
在线字体格式转换网站:cloudconvert
font-weight
初始值:normal
取值范围:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- 100或200可能是一样的效果,这个跟字体的字重等级划分有关(小于9),也就是说
值名称
对应某个数字区间,在这个区间内字重不会发生改变
font-size
初始值:medium(默认16px)
取值范围:xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>
- 较为常用的是数字+单位的组合,单位有em、rem、px、pt等
- 采用百分数的时候,会基于父元素的字号计算,
1em == 100%
- 在某些浏览器中,等宽字体字号设置为基于父元素相关的值(父元素字号为medium),不会基于父元素的字号计算,而是浏览器默认的等宽字号(默认13px),可以采用
font-family: monospace, serif;
解决,即添加serif
- 推荐使用em或者rem,而不推荐使用像素值,因为绝对单位在不同的设备中表现的不一样
font-style
初始值:normal
取值范围:italic | oblique | normal
- italic(斜体)和oblique(倾斜体)通常使用同一款字型,可以做到相互替代
font-stretch
初始值:normal
取值范围:normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
- 字体拉伸只有在使用的字体有多个宽度的时候才会生效,不然都会是normal效果
font-kerning
初始值:auto
取值范围:auto | normal | none
- none:用户代理忽略字体中的字距信息
- normal:用户代理正常处理字距,即使用字体中的字距数据
- auto:让用户代理选择合适的处理方式,具体怎么做依赖于使用的字体
font-variant
初始值:normal
取值范围:normal | small-cap (css2.1) (css3)
- small-cap:类似于
text-form: upperform;
,区别:大写字母采用较大的大写字母显示,小写字母采用较小的大写字母显示 - 使用的字体不存在small-cap字型,用户代理可能会自己创建或者采用
text-form: upperform;
一样的效果