如何在Html5中自定義字體？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元新寧做網(wǎng)站,已為上家服務(wù),為新寧各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

第一步：使用@font-face

MDN概述

這是一個叫做@font-face 的CSS @規(guī)則 ，它允許網(wǎng)頁開發(fā)者為其網(wǎng)頁指定在線字體。 通過這種作者自備字體的方式，@font-face 可以消除對用戶電腦字體的依賴。 @font-face 不僅可以放在在CSS的最頂層, 也可以放在 @規(guī)則 的 條件規(guī)則組 中。

簡單來說就是可以在網(wǎng)頁上用自己的字體包 可以放在類似@media媒體查詢等@規(guī)則中

用法

@font-face CSS at-rule 指定一個用于顯示文本的自定義字體；字體能從遠(yuǎn)程服務(wù)器或者用戶本地安裝的字體加載. 如果提供了local()函數(shù)，從用戶本地查找指定的字體名稱，并且找到了一個匹配項, 本地字體就會被使用. 否則, 字體就會使用url()函數(shù)下載的資源。

通過允許作者提供他們自己的字體，@font-face 讓設(shè)計內(nèi)容成為了一種可能，同時并不會被所謂的"網(wǎng)絡(luò)-安全"字體所限制(字體如此普遍以至于它們能被廣泛的使用). 指定查找和使用本地安裝的字體名稱可以讓字體的自定義化程度超過基本字體，同時在不依賴網(wǎng)絡(luò)情況下實現(xiàn)此功能。

在同時使用url()和local()功能時，為了用戶已經(jīng)安裝的字體副本在需要使用時被使用，如果在用戶本地沒有找到字體副本就會去使用戶下載的副本查找字體。
@font-face 規(guī)則不僅僅使用在CSS的頂層，還可以用在任何CSS條件組規(guī)則中.

簡單來說就是@font-face 突破網(wǎng)絡(luò)安全限制，可以讓作者自由使用自己想要的字體，可以用在任何css條件組規(guī)則中，這里不對其local()函數(shù)做額外延伸。

下面貼一個日常用法

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),//后綴是字體文件格式 常見有ttf svg等
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

這里提供一個在線字體轉(zhuǎn)化網(wǎng)站字體格式轉(zhuǎn)化

第二步：字體包壓縮

成功引入后，就發(fā)現(xiàn)字體包太大了，這里就涉及字體包壓縮，使用一個字體包壓縮器 font-spider。

font-spider使用

基本原理

通過匹配html中用到的文體，刪除剩余沒有用到的文字。達(dá)到壓縮字體包的目的。

安裝

npm install font-spider -g

沒有安裝node npm的同學(xué)，請尋找安裝方法

使用

@font-face {
    font-family: mysimhei;
    src: url(../../../simhei.ttf);
}
p{
    font-family: mysimhei;
}

注意如果使用要在css文件中先這樣引入

font-spider ./demo/*.html

這里的*號是表示匹配全部 也可指定html。

font-spider ./demo/*.html ./demo/pages/index.html

多文件的話用空格分開

壓縮完成

會生成一份備份字體文件與壓縮后的字體包

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁題目：如何在Html5中自定義字體
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article14/psihge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、商城網(wǎng)站、網(wǎng)站制作、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)