从 MDN 上可以看到,当元素的一个继承属性 (inherited property)没有指定值时,则取父元素的同属性的计算值(computed value)。
成都创新互联公司从2013年开始,先为尤溪等服务建站,尤溪等地企业,进行企业商务咨询服务。为尤溪企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
比如 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设计稿就会也随之变得奇奇怪怪。
苹果会把很多css样式进行它认为比较好的优化。。其实并不是很好看。
Lucida Grande
理由如下:
其字体样式为
font: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
所以它使用的首选字体是Lucida Grande,在你电脑上没安装改字体的情况下,使用Lucida Sans Unicode,如果这个也没有安装,继续类推~~~
所以不出意外,你电脑上显示的是Lucida Grande。
不放心的话,你依次百度下这些字体的样式看看哪个是苹果显示的便可确定
你所使用的具体字体,并不是根据你的电脑显示,而是根据不同设备当中的字体类型显示。
你使用了苹果字体,但是在大部分的安卓手机以及windows电脑当中,并没有这种字体,这种情况下,这些客户端会以自己当前有的字体替换掉你定义的字体,如果客户端(浏览者的设备)有你设置的字体,那么可以正常显示。
通常如果想兼容各种设备,都是采用微软雅黑、宋体、黑体等常规字体,而不采用其他特殊字体。
CSS和系统无关,只和你应用的什么浏览器有关。
至于你下面说得苹果或者微软的系统可以判别出来,那是因为他们的浏览器内核不一样。
如果你非要那样做。
写两套css,都用link的方式链接到页面里面
然后用js来判断
如果是苹果系统(针对具体的浏览器为),就把为微软系统准备的那个css链接屏蔽掉
如果是微软系统(针对具体的浏览器为),就把为苹果系统准备的那个css链接屏蔽掉
学习导航
1、css中的长度与颜色
2、css中的文字属性
3、css中的文本属性
1、文字样式属性
font-family 字体属性
作用:元素内文字以什么字体来显示
语法:font-family:[字体1],[字体2],[......];
说明:含空格字体名和中文,用英文引号(")括起;多个字体用英文逗号隔开;引号嵌套,外使用双引号,内使用单引号。
font-size 文字大小
作用:元素内文字大小
语法:font-size:绝对单单位,相相对单位
color 文字颜色
语法:颜色名|十六进制|RGB
font-weight 文字粗细
语法:font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900
说明:默认值:normal 400等同于normal,而700等同于bold
font-style 文字样式
作用:为元素内文字设置样式
语法:font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜(基本不用)
font-variant 字体变形
作用:设置元素中文本为小型大写字母
语法:font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽
font 属性简写
语法:font:font-style font-variant font-weight font-size/line-height font-family;
说明:值之间空格隔开,注意书写顺序。
2、CSS文本样式
text-align
作用:设置元素内文本的水平对齐方式
语法:tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐
注意:该属性对块级元素设置有效
line-height
作用:设置元素中文本行高
语法:line-height:长度值 | 百分比
说明:一行文字的高度,行高指文本行的基线间的距离
文字基线
注意:基线并不是汉字文字的下沿,看图理解自行理解
行高和行距
行高:基线到基线的距离
行距:底线到顶线的距离
注意:看图自行理解
行框和行内框
注意:看图自行理解
vertical-align
作用:设置元素内容的垂直方式
语法:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比
注意:看图自行理解
text-indent 首行缩进
3、文本样式属性
text-transform: capitzlize 首字母大写 | uppercase 字母大写 | lowercase 字母小写 | none 正常
text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常
综合实操案例
如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!