CSS字体属性

160 阅读2分钟

这是我参与2022首次更文挑战的第7天
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。
  1.字体系列
    CSS使用font-family属性定义文本的字体系列。
1)语法:
p{ font-famliy:"微软雅黑" }
div{ font-family:Arial,"Microsoft Yahei" , "微软雅黑";}
2)注意:
各字体之间必须使用英文状态下的逗号隔开。
一般情况下,如果有空格隔开的多个单词组成的字体,加引号(单引号和双引号均可)。
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示。
若是有多个字体,系统会优先查看第一个字体,若第一个没有,则查看下一个。若是都找不到,则系统会使用电脑默认的字体,一般默认字体为“微软雅黑”。
一般会把字体放入body内,body{ font-family:'Times New Roman', Times, serif;;}
  2.字体大小
    CSS使用font-size属性定义字体大小。
1)语法:
p{
     font-size:20px;
}
2)注意:
px(像素)大小是我们网页常用的单位,必须加单位。
谷歌浏览器默认的字体大小为16px。
不同浏览器可能默认显示的字号大小不一致,我们尽量给出一个明确值大小,不要默认大小。
可以给body指定整个页面文字的大小。
标题标签比较特殊,需要单独指定文字大小。
  3.字体粗细
    CSS使用font-weight属性设置文本字体的粗细。也可以使用strong标签来实现。
1)语法:
p{
    font-weight:bold;
}
2)注意:
学会让加粗标签(比如h和strong等)不加粗,或者其他标签加粗。
在实际开发中,更喜欢用数字表示粗细,数字后不加单位。
  4.文字样式
    CSS使用font-style属性设置文本的风格。
1)语法:
p{
    font-style:normal;
}
2)注意:
平时我们很少给文字加斜体,反而要给斜体标签(em、i)改为不倾斜字体。
  5.字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码。
1)语法:
body{
    font:font-style font-weight font-size/ line-height font-family;
}
2)注意:
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开。
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。