3.文字：font

(1) font-size：大小
      · 通常使用px、em、rem、百分比为单位设置大小
      · xx-small、x-small、small、medium、large、x-large、xx-large，默认medium
      · smaller：设置为比父元素更小的尺寸
      · larger：  设置为比父元素更大的尺寸

<p style="font-size:18px">长风破浪会有时</p>
<p style="font-size:xx-small">长风破浪会有时</p>
<p style="font-size:smaller">长风破浪会有时</p>
<p style="font-size:larger">长风破浪会有时</p>

 

(2) font-weight：粗细
      · normal：  默认值
      · bold：      粗体
      · bolder：   更粗的粗体
      · lighter：   更细的字体
      · 100-900：定义由粗到细的字体。400等同于normal，700等同于bold

<p style="font-weight:bold">长风破浪会有时</p>

 

(3) font-family：字体
      · 例如：宋体、楷体、黑体

<p style="font-family:黑体">长风破浪会有时</p>

 

(4) font-style：样式
      · normal： 默认值。显示一个标准字体
      · italic：     斜体
      · oblique：斜体

<p style="font-style:italic">长风破浪会有时</p>

 

(5) font-variant：规定是否以小型大写字母的字体显示文本
      · normal：      默认值。显示一个标准字体
      · small-caps：显示小型大写字母的字体

<p style="font-variant:small-caps">aaaAAA长风破浪会有时</p>

 

(6) font：在一个声明中设置所有字体属性
      · 至少要指定字体大小size和字体系列family
      · 可以按默认顺序设置：font-style/font-variant/font-weight/font-size/font-family

<p style="font:italic normal bold 18px 黑体">长风破浪会有时</p>

 

(7) vue中如何引用外部字体？（@font-face：嵌入字体）
自如网：https://fontru.com/fonts/

步骤一：下载字体；（此处下载的字体为'阿朱泡泡体.ttf'）

步骤二：将下载好的字体放到项目的assets文件夹下-->然后新建一个font.css文件-->然后font.css文件中配置字体如下：

@font-face {
    font-family: '阿朱泡泡体';
    src: url('阿朱泡泡体.ttf');
    font-weight: normal;
    font-style: normal;
}

步骤三：main.js中引入字体：

// 引入字体
import './assets/fonts/font.css'

步骤四：在需要改变字体的地方使用：

<div class='test'>长风破浪会有时</div>
<style scoped>
    .test {
        font-family: '阿朱泡泡体';
    }
</style>