CSS 自定义字体样式

作为前端，如果UI设计师给的psd设计图中的文字字体我们电脑中没有（电脑没有自带），如何让这种字体在客户的浏览器中正常显示呢？以前前端程序员是将文字截图直接放入页面（这种方式修改文字内容的话很不方便），现在我们可以通过自定义字体样式让客户正常显示。

第一步：在你要写得index.vue文件同级（也可以其他地方创建）创建一个font文件，把要引入的字体文件复制到font文件夹中，比如以下这两种字体：

第二步：在你要使用此自定义字体的页面index.vue文件中写入样式代码：

  <style lang="less" >

        @font-face{
            font-family: '思源-heavy';
            src : url('../font/思源黑体SourceHanSansCN-Bold.otf');
        }
        @font-face{
            font-family: '452-cai978';
            src : url('../font/思源黑体SourceHanSansCN-ExtraLight.otf');
        }
  </style>

第三步：使用：

html部分：

<div class="titleDiv">自定义字体样式</div>

CSS部分：在要修改字体的class名字titleDiv中写：

        .titleDiv {
            font-family: '思源-heavy';
            width:100%;
            height:60px;
        }

这就是自定义字体的全过程！