font字体属性(字体/字体大小/字体粗细/文字样式)及复合写法

font-family设置字体

p {font-family: "微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}
  • 各个字体之间用英文逗号隔开
  • 如果有空格隔开的多个单词组成的字体,加引号
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
  • 通常在开发中都是给body定义字体
body {font-family: Arial,"Microsoft Yahei","微软雅黑";}

font-size字体大小

p {
    font-size: 16px;
}
  • px(像素)大小是网页最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同的浏览器可能默认显示的字号大小不一致,尽量给一个明确值大小,不要默认大小
  • 可以给body指定整个页面文字的大小

font-weight字体粗细

p {
    font-weight: 700;
}

属性值

  • normal:默认值(不加粗)
  • bold:定义粗体
  • 100 - 900:400等同于normal,700等同于bold。(数字后不跟单位)

font-style文字样式

p {
    font-style: normal;
}

属性值

  • normal:默认值,浏览器会显示标准的字体样式
  • italic:浏览器会显示斜体的字体样式

平时很少给文字加斜体,反而要给斜体标签(em、i)改为不倾斜字体。

font复合属性写法(简写可节约代码)

p {
    font: italic 700 16px/28px 'Microsoft Yahei';
}

//书写顺序:文字样式 文字粗细 文字大小/行高 字体
  • 使用font属性时,必须按照规定顺序书写,不能更改顺序!并且各个属性间以空格隔开。
  • 不需要设置的值可以省略不写,但必须保留 font-size 和 font-family 属性,否则font属性将不起作用。

版权声明:本文由迟博勋博主编辑发布,如需转载请注明来源!本文地址:https://www.chiboxun.com/442.html

(3)

猜你想看

  • html列表标签

    列表是用来布局的。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。根据使用场景不同,列表可以分为三大类:无序列表、有序列表、自定义列表。 无序列...

    2022年4月3日
    780
  • css引入方式

    内部样式表(嵌入式/内嵌式) 内部样式表是写到html页面内部,是将所有的css代码抽取出来,单独放到一个<style>标签中。 <style>标签...

    网页开发 2022年4月3日
    680
  • html注释标签及特殊字符

    注释 被注释的代码不会被执行,快捷键ctrl+/ 特殊字符 重点记住:空格、大于号、小于号。

    2022年4月3日
    770
  • html表格标签

    表格作用 表格主要用于显示、展示数据。它可以让数据显示的非常规整,可读性好。 表格基本语法 解释: 定义表格 定义表格中的行,嵌套在标签中 定义表格中的单元格,...

    2022年4月3日
    1600

发表回复

登录后才能评论

联系博主

139-xxxx-2322

在线沟通: QQ交谈

邮箱:chinachiboxun@gmail.com