字体中的各种样式

字体大小设置的释义:

一般浏览器设置的字体大小都是16px
其实我们的字体都是在一个个我们看不见的格子里面,我们font-size设置的都是格子的大小,一般来说字体都是会比格子小一些的,但是小多少是有字体效果决定的,但也有些字体比格子大,比如微软雅白字体。
兼容问题
而且,不同浏览器可能设置不同,然后导致字体在不同的浏览器上面的显示效果不同
但,我们可以主动去设置字体

字体的设置 font-family

通过font-family可以指定字体格式
如下
在这里插入图片描述

当浏览器不支持文字字体:

浏览器使用的字体默认就是计算机中的字体,如果计算机中有则使用,如果没有就不用,所以浏览器的支持不支持主要是由自己的计算机决定的
计算机中的字体在C盘下Window文件中的Fonts里面,可以在这查看自己计算机中的字体
如下:
在这里插入图片描述

某些浏览器可能不支持某些样式,比如对英文的样式用在了中文上,所以当浏览器不支持我们设置的样式时,浏览器会使用自己的默认样式

font-family该样式可以同时指定多个字体,浏览器会优先使用前面的当前面的不兼容,浏览器会尝试使用后面的,都不行会使用浏览器默认字体当我们同时设置英文和中文字体的时候可以这样用

开发过程中,尽量不要多用奇怪的字体,如果用户计算机里面没有,那就尴尬了

字体分类

serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
以上这些分类都是一些大的分类,并没有涉及具体的类型,就跟人的分类一样,这里字体分类就可以比对成人的分类,然后下面的类别就对应人中的女人或男人,比如宋体就属于衬线字体。如果将字体指定为这些格式,浏览器会自己选择指定类型中的字体

常用的类也就衬线字体和非衬线字体两种

衬线字体
即拖泥带水的那种字体,他的字体总不是直来直去的,会带一点小尾巴。比如:
在这里插入图片描述
结尾总是带点东西
再看非衬线字体
非衬线字体:
在这里插入图片描述
跟衬线字体比一比就知道差别了
在这里插入图片描述

兼容问题:
某些浏览器对着这个东西处理的不是太好
比如谷歌浏览器对衬线字体和非衬线字体的处理就不是那么明显

字体的其他样式

font-style用于设置文字的斜体,其值有:
normal(默认值)
italic(文字以斜体显示)

font-weight用于设置文字的粗细,其值有:
nomal(默认值)
bold 粗体
bolder 更粗
lighter 更细
100
200
300

900
由细到粗,400等同于nomal,700等同于bold
但是一般用户计算机中没有这么多区别,可能某些级别的粗细相同

font样式(多选样式)

当要同时设置多个样式,我们可以用font样式
将多个样式同时写在font中,每种样式用空格隔开
在这里插入图片描述
注意:
用这个东西则必须在里面设置文字的大小和字体,不然其他的设置会失效,而且字体设置必须写在最后面,大小设置必须写在倒数第二个
用这个还能加快浏览器的性能

猜你喜欢

转载自blog.csdn.net/qq_45821251/article/details/108985640
今日推荐