AI智能
改变未来

CSS基础——字体属性,风格字体


font-size属性定义字体大小
font-weigth属性设置文本字体粗细
font-style属性设置文本风格
font-family属性设置元素字体类型

设置字体大小

font-size

p{font-size:20px;}

注意:

  1. 谷歌浏览器默认的文字大小为16px
  2. 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
  3. 可以给 body 指定整个页面文字的大小

字体粗细

font-weight

p{font-weight:bold;}


注意:

  1. 在开发时,更偏向使用数字设置

字体样式

font-style

i{font-style:normal}

字体类型

font-family 指定一个元素的字体

p{font-family:\"Times New Roman\",Georgia,Serif;}

注意:

  1. 字体何时需要添加引号 当字体具体某个取值中若有一种样式名称包含空格和书写中文字体名称,则需要用双引号或单引号表示
p{font-family: \"Microsoft YaHei\", \"Arial Narrow\", sans-serif,\"黑体-简\";}
  1. 字体的中英文写法: 一般字体文件都是用英文命名的(如SimSun、Microsoft、Yahei),在大多数情况下直接使用显示名称也能正确的显示(如微软雅黑、宋体),但是有一些用户的特殊设置会导致中文声明无效。
    因此,保守的做法是使用字体的字体名称(英文)或者两者兼写
p{ font-family: STXihei,\"Microsoft YaHei\"; font-family: STXihei, \"华文细黑\", \"Microsoft YaHei\",\"微软雅黑\"; }
  1. 声明英文字体
    绝大部分中文字体里都包含英文字母和数字,不进行英文字体声明是没有问题的,但是大多数中文字体中的英文和数字的部分都不是特别漂亮,所以也可以对英文字体进行声明。
    由于英文字体中大多不包含中文,我们可以先进行英文字体的声明,这样不会影响到中文字体的选择,因此优先使用优秀的英文字体,中文字体声明则紧随其次。
p{font-family: Arial, \"Microsoft YaHei\";}
  1. 通用中文字体的英文名称
    宋体 SimSun
    黑体 SimHei
    微软雅黑 Microsoft YaHei
    微软正黑体 Microsoft JhengHei
    新宋体 NSimSun
    仿宋 FangSong
    楷体 KaiTi
    仿宋_GB2312 FangSong_GB2312
    楷体_GB2312 KaiTi_GB2312

字体的综合写法

字体属性可以把以上文字样式综合来写,这样可以更节省代码

body{
font:font-style font-weight font-size/line-height font-family;
}

p {font: italic 700 20px MFMingHei;}

注意:

  1. 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序
  2. 各个属性间以空格隔开
  3. 不需要设置的属性可以省略(取默认值),但必须保留 font-sizefont-family 属性,否则 font 属性将不起作用

字体总结

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS基础——字体属性,风格字体