vue項目中使用特殊字體

vue項目中使用特殊字體

最近項目中需要使用一些特殊字體，字體的效果圖如下：

這是一種名叫DINCond-Regular的字體，下面以此爲例介紹一下在vue項目中如何使用特殊字體：

1、獲取特殊字體文件

首先需要獲取特殊字體的源文件，一般由視覺同學給我們提供，字體文件通常是以eot、otf、ttf、woff等作爲後綴。對於DINCond-Regular字體，我們使用的是DINCond-Regular.otf文件；

2、對於使用vue-cli腳手架創建的項目，找到src/assets目錄，新建一個名叫DINfont的文件夾用於存放特殊字體源文件；創建一個DINfont.css文件用於聲明該特殊字體；對於自己手動創建的項目（不使用vue-cli腳手架），也可以通過在項目中創建assets目錄，進行上述操作；對於vue-cli2或者vue-cli3創建的項目，腳手架自動幫我們在webpack中添加url-loader處理特殊字體文件，我們不用再處理，但是對於自己手動創建的項目，我們需手動在webpack配置中添加url-loader對字體文件的處理；

DINfont.css中特殊字體聲明如下：

// DINfont.css
@font-face {
  font-family: 'din-regular';
  src: url('./DINfont/DINCond-Regular.otf') format('truetype');
}

3、特殊字體聲明完後需要在項目中引入該樣式文件，引入方式有兩種，一種是全局引入，即在項目入口文件中引入，全局引入後在項目的任何地方都可以使用該特殊字體；另一種是局部引入，即只在需要使用該特殊字體的文件中引入。

• 全局引入：

在項目的入口文件main.js中全局引入字體樣式

// main.js
import './assets/DINfont.css'

• 局部引入：

例如，在App.vue文件中需要使用該特殊字體，則在App.vue文件中引入

// App.vue
<template>
	...
</template>
<script>
...
import './assets/DINfont.css'
...
</script>
<style>
...
</style>

4、至此，vue項目中引入特殊字體的工作就完成了，接下來就可以直接使用了，如下：

<div id="app">
    <div>我是瀏覽器默認字體</div>
    <div class="font">我是特殊字體DINCond-Regular 0000</div>
</div>

#app{
  font-size: 32px;
}
.font{
  font-family: 'din-regular';
}

效果如下：