关注互联网应用及运维技术的个人博客

用CSS的字体属性定义字体系列、大小和粗细等文字样式

字体系列

font-family 属性用来规定元素的字体系列,字体系列又分为:特定字体系列(如:Microsoft YaHei)和通用字体系列(如:sans-serif);设置字体系列是为了让所有用户都看到统一的风格(不同浏览器默认的字体也不同)

语法:

font-family: "字体名称";
  • 如指定了多个字体,各个字体之间必须用英文逗号隔开
  • 如果有空格隔开的多个单词组成的字体,用引号包围起来
  • 字体名称可以使用中文(如:微软雅黑和Microsoft YaHei是一样的)但更推荐使用英文
  • 尽量使用系统默认自带的字体,确保所有用户都能正常显示
  • 当设置了多个字体时,会首先匹配第一个字体,如果用户设备上没有这个字体,则会去匹配下一个,如果都没有,则使用浏览器默认的字体

字号大小

font-size 可以设置文本的大小,管理文字大小,是网页设计中的重要一环,比如说你不能让段落看起来像标题、标题看起来像段落,务必遵循HTML标签的语义:<h1>~<h6>表示标题、<p>表示段落

语法:

font-size: 属性值;

属性值可以是绝对或相对数值

字体大小的值可以是相对或者绝对的。

绝对大小:

  • 直接指定了文字的物理大小值
  • 文本大小不会随着浏览器的缩放而发生变化
font-size: 20px;

/* px:像素单位   1px = 1像素 */

相对大小:

  • 相对于周围的元素来设置大小
  • 文本大小会随着浏览器的缩放而发生变化
font-size: 1.5em;

/* 1em = 当前字体大小,在浏览器中,默认字体大小为16px */
/* 因此,1em默认大小是16px */

字体粗细

font-weight 可以设置文本的粗细

语法:

font-weight: normal|bold|lighter|bolder|number;
  • 属性值:
  1. normal:默认值
  2. bold:粗体字符
  3. lighter:细体字符
  4. bolder:更粗的字符
  5. number:规定一个数值,从100 – 900,400同等于normal,700同等于bold;注意:数值后面不要带单位
  • 在实际开发中,更多的是用数值来表示粗细

文字样式

font-style用于指定文字的字体样式属性,有三个值:

  • 正常:正常显示文本
  • 斜体:以斜体显示文本
  • 倾斜的文字:显示倾斜的文本

语法:

font-style: normal|italic|oblique;
  • normal:默认值,显示一个标准的字体(不倾斜)
  • italic:显示一个斜体字体样式
  • oblique:显示一个倾斜的字体样式

italic和oblique的区别:一种字体有粗体、斜体、下划线、删除线等诸多样式;但并不是所有字体都做了这些样式,一些字体可能只有一个正常体,这种字体用italic就没有效果了,oblique可以让没有斜体样式的字体倾斜


字体复合属性

font 可以在一个声明中设置所有字体属性

font: font-style font-weight font-size/line-height font-family;
  • 复合属性必须按照上面语法格式的顺序书写,不能更换顺序,属性与属性之间用空格隔开
  • 不需要的属性可以省略(取默认值),但至少要有font-size和font-family这两个属性,否则font属性将不起作用
赞(0)
未经允许不得转载:飞天狒狒 » 用CSS的字体属性定义字体系列、大小和粗细等文字样式

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址