css外部字體庫文件的引用

最近在作項目的時候，須要顯示相似鐘錶的數字字體，作完以後記錄一下：

一、下載字體庫文件

　　本身去網上下載你想用的css字體庫，這個就根據需求本身下載了。

　　我本身項目中的之這個樣子的（DS-Digital文件夾是我下載的字體庫）：

　　

　　我是放在css目錄下，你能夠本身按照本身的意願放到其餘地方。

二、在css中引用

　　在我本身新建的serviceHall.css中引用

　　

1 @font-face {
2     font-family: electronicFont;
3     src: url(../css/DS-Digital/DS-DIGIT.ttf), url(../css/DS-Digital/DS-DIGII.ttf), url(../css/DS-Digital/DS-DIGIB.ttf), url(../css/DS-Digital/DS-DIGI.ttf)
4 }

　　font-family的值能夠本身定義。根據你的字體庫路徑引入字體文件。

三、引用咱們本身引入的樣式

　　跟平時寫樣式那樣，好比

 1 .servicehall-today-tablelist-wait{
 2     width: 25%;
 3     font-size: 20px;
 4     text-align: center;
 5     padding: 8px 2px;
 6     line-height: 24px;
 7     vertical-align: top;
 8     overflow: hidden;
 9     text-overflow: ellipsis;
10     white-space: nowrap;
11 
12     font-family: electronicFont;
13 }

　　這樣就OK了，就是這麼簡單。效果圖（數字字體部分是我引入的字體）：