CSS-常见字体样式属性的用法详解

深碍√TFBOYSˉ_ 2023-08-17 17:12 129阅读 0赞

#### CSS 字体属性 font ####

##### font-size #####

`font-size: 16px;` font（字体），size（大小），用于设置文字的大小；值为数值型，单位有绝对长度单位也有相对长度单位

<table> 
 <thead> 
  <tr> 
   <th>相对长度单位</th> 
   <th>单位说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>px</td> 
   <td>像素，是一个确定的长度单位，大小为固定的值，常用的单位</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td>相对于父级元素的字体大小倍数，例如2em表示设置为父级的2倍大小</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>相对根元素（html）的大小倍数</td> 
  </tr> 
  <tr> 
   <td>绝对长度单位（了解）</td> 
   <td>单位说明</td> 
  </tr> 
  <tr> 
   <td>in</td> 
   <td>英寸</td> 
  </tr> 
  <tr> 
   <td>cm</td> 
   <td>厘米</td> 
  </tr> 
  <tr> 
   <td>mm</td> 
   <td>毫米</td> 
  </tr> 
  <tr> 
   <td>pt</td> 
   <td>点</td> 
  </tr> 
 </tbody> 
</table>

目前谷歌浏览器默认的字体大小为 `16px`，不同浏览器的默认字体大小可能不一样，一般通过 body 标签来指定整个页面的大小

###### font-weight ######

`font-weight: notmal;` weight（重量），用来给字体加粗，通过 CSS 来加粗字体是没有语义的；想要使其有语义可以使用 b 标签或 strong 标签

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal（正常的）</td> 
   <td>默认值，不对字符加粗</td> 
  </tr> 
  <tr> 
   <td>bold（黑体、粗体）</td> 
   <td>对字符加粗</td> 
  </tr> 
  <tr> 
   <td>100~900</td> 
   <td>重点记住：400 等同于 normal，而 700 等同于 bold</td> 
  </tr> 
 </tbody> 
</table>

###### font-family ######

`font-family: arial,SimHei,SimSun,"Microsoft Yahei","楷体";` family（家族），用于设置字体系列

*  该样式属性的属性值可以同时有多个，多个值之间用英文逗号隔开
 *  如果一种字体类型是用多个单词表示的则该字体类型要用英文引号括起来
 *  用中文表示的字体类型也需要用英文状态下的引号引起来
 *  如果字体名中包含空格、\#、$等符号，则该字体必须加英文状态下的单引号或双引号
 *  使用时将最希望显示的字体放在字体列表的第一个，当第一个字体不可用时，会使用后边的备选字体，通用的字体放在最后
 *  尽量使用系统默认字体，保证用户在任何浏览器中都能正确显示
 *  为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

在 CSS 中设置字体类型可以直接写中文，但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误并且 xp 系统不支持 类似微软雅黑的中文

解决办法：可以使用英文来代替也可以使用 **Unicode编码** 字体

<table> 
 <thead> 
  <tr> 
   <th>字体名称</th> 
   <th>英文名称</th> 
   <th>Unicode 编码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>宋体</td> 
   <td>SimSun</td> 
   <td>\5B8B\4F53</td> 
  </tr> 
  <tr> 
   <td>新宋体</td> 
   <td>NSimSun</td> 
   <td>\65B0\5B8B\4F53</td> 
  </tr> 
  <tr> 
   <td>黑体</td> 
   <td>SimHei</td> 
   <td>\9ED1\4F53</td> 
  </tr> 
  <tr> 
   <td>微软雅黑</td> 
   <td>Microsoft YaHei</td> 
   <td>\5FAE\8F6F\96C5\9ED1</td> 
  </tr> 
  <tr> 
   <td>楷体_GB2312</td> 
   <td>KaiTi_GB2312</td> 
   <td>\6977\4F53_GB2312</td> 
  </tr> 
 </tbody> 
</table>

示例：`font-family: arial,"\9ED1\4F53","\5B8B\4F53"`

###### font-style ######

`font-style: normal;` style（风格、样式），用于设置字体的样式

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>默认值，无字体样式</td> 
  </tr> 
  <tr> 
   <td>italic（斜体字）</td> 
   <td>以斜体字的样式显示</td> 
  </tr> 
 </tbody> 
</table>

*  通过 CSS 设置斜体字同样是没有语义的；想要使其有语义可以使用 i 标签或 em 标签
 *  在实际开发中，很少给文字加斜体，通常是将斜体标签（i、em）的样式改为普通样式

###### font 综合设置 ######

可以用 font 属性对字体样式进行综合设置

语法：

选择器 {  font: font-style  font-weight  font-size/line-height  font-family;}

使用 `font` 属性时，必须按上述语法格式中的顺序书写，不能更换顺序，各个属性用**空格**隔开

不需要设置的属性可以省略（会取默认值），但必须保留 `font-size` 和 `font-family` 属性，否则 `font` 属性不起作用

示例：

div { 
    	font: italic normal 16px/20px SimSun;
    }