比如 color 属性就是继承属性,给父级元素设置了 color ,则子元素会继承。
CSS 属性 font-family 允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性 font-family 列举一个或多个由逗号隔开的字体族,语法如下:
font-family 是一个继承属性,比如,我在child元素的父元素.parent 上添加 font-family: serif,子元素也会继承它的属性值。
但是,我们给子元素的 font-family 随便设置一个值 unknow,这实际上是一个无效的字体。
浏览器识别不出来这是一个无效的值,计算值的结果还是 unknown,但实际效果则是直接降级到浏览器的默认值。此时并不会即成父级元素设置的值,这跟我们的认知还是不一样的。
然而,假如我们设置子元素的样式如下,即在 test 之后再设置一个字体 Gill Sans ,
就会降级到 Gill Sans 了。
我们通常会在全局样式中设置通用字体,以保证字体样式在不同设备上呈现时,至少有一个最基本的字体样式可以降级,而不是直接降级为系统默认字体。
但是当我们为某些特定元素设置字体样式时,比如设计希望在苹果设备上呈现出 PingFang SC 字体样式。如果理所当然的设定为,
那么会覆盖全局设置的通用字体样式,而如果该设备上没有苹方字体时,就会降级到系统默认字体,而不是设置的全局通用字体。
因此当UI有特殊字体样式要求时,请务必在设置字体样式时,除了特殊字体的声明,也要保证在特殊字体后边添加用于降级的通用字体,比如:
否则当用户在系统上设置了奇怪的默认字体时,您的UI设计稿就会也随之变得奇奇怪怪。
以下为font-family常用合集以及一部分文字效果:
windows常见内置中文字体
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
宋体:SimSuncss中中文字体(font-family)的英文名称
Mac OS的一些:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
俪黑 Pro:LiHei Pro Medium
俪宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果俪中黑:Apple LiGothic Medium
苹果俪细宋:Apple LiSung Light
Windows的一些:
新细明体:PMingLiU
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
装Office会生出来的一些:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei
font-family,好看常用的字体
例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif
例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif
例3(加网 ):font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif
例4(淘宝UED):font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif
例5(一淘UX):font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif