CSS引入外部字體方法，附可用demo

mudiyouyou 發(fā)布于2019-08-30 14:00 / 2731人閱讀

摘要：有時候我們做的頁面需要用到一些更好看的字體又不想用圖片代替，圖片會影響加載速度則使用外部字體來顯示但是直接通過又不一定全部都行這就需要我們在中進(jìn)行定義并且引入字體文件路徑然后再使用外部字體直接上代碼引用外部字體里客云資源站其中替換為

有時候我們做的頁面需要用到一些更好看的字體
又不想用圖片代替，圖片會影響加載速度
則使用外部字體來顯示
但是直接通過font-family又不一定全部都行
這就需要我們在css中進(jìn)行定義并且引入字體文件路徑
然后再使用外部字體

直接上代碼：
font.html




    
    CSS引用外部字體
    


里客云資源站
www.likeyunba.com

font.css

@font-face {
 font-family: "fontnameRegular";
 src: url("fontname.eot");
 src: local("fontname Regular"),
        local("fontname"),
        url("fontname.woff") format("woff"),
        url("fontname.ttf") format("truetype"),
        url("fontname.svg#fontname") format("svg");
}  
/*其中fontName替換為你的字體名稱*/
h1{font-family: fontnameRegular}

字體文件下載：
https://pan.lanzou.com/i0jon3e

其中上面的font.css
fontname代表字體文件名的名稱
例如你的字體文件是heiti.ttf
那么上面的
fontname全都要改為heiti

OK，引入之后的效果
看得出來是已經(jīng)發(fā)生改變了！
里客云資源站
http://www.likeyunba.com
技術(shù)交流群請加微信：likeyunba520

GPU云服務(wù)器云服務(wù)器引入外部css php引入外部文件. js中引入外部js css引入css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115693.html

相關(guān)文章

CSS引入外部字體方法，附可用demo

摘要：有時候我們做的頁面需要用到一些更好看的字體又不想用圖片代替，圖片會影響加載速度則使用外部字體來顯示但是直接通過又不一定全部都行這就需要我們在中進(jìn)行定義并且引入字體文件路徑然后再使用外部字體直接上代碼引用外部字體里客云資源站其中替換為有時候我們做的頁面需要用到一些更好看的字體又不想用圖片代替，圖片會影響加載速度則使用外部字體來顯示但是直接通過font-family又不一定全部都行這就需...

wangbinke 2019-08-01 18:36 評論0 收藏0
前端筆記之CSS（上）

摘要：宋體注意使用某種特定的字體系列宋體完全取決于用戶機(jī)器上該字體系列是否可用這個屬性沒有指示任何字體下載。但是記住，最終選擇上的是最后的那個后代元素。層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0
jQuery+PHP實現(xiàn)點擊按鈕加載更多，不刷新頁面加載更多數(shù)據(jù)！附：可用源碼+demo

摘要：注意，里面需要引入庫，自己可以去網(wǎng)上下載這個壓縮版的。下面是數(shù)據(jù)庫數(shù)據(jù)庫賬號，密碼，地址這個根據(jù)自己的開發(fā)配置填，我的代碼里面，數(shù)據(jù)庫名為，表名為下面是結(jié)構(gòu)截圖就這么多了很簡單吧本教程由里客云資源站提供先上效果：showImg(https://segmentfault.com/img/bV37XZ?w=294&h=592); 剛打開頁面的時候，只顯示部分?jǐn)?shù)據(jù)，點擊加載更多的時候，就會...

LeoHsiun 2019-08-26 11:48 評論0 收藏0
jQuery+PHP實現(xiàn)點擊按鈕加載更多，不刷新頁面加載更多數(shù)據(jù)！附：可用源碼+demo

摘要：注意，里面需要引入庫，自己可以去網(wǎng)上下載這個壓縮版的。下面是數(shù)據(jù)庫數(shù)據(jù)庫賬號，密碼，地址這個根據(jù)自己的開發(fā)配置填，我的代碼里面，數(shù)據(jù)庫名為，表名為下面是結(jié)構(gòu)截圖就這么多了很簡單吧本教程由里客云資源站提供先上效果：showImg(https://segmentfault.com/img/bV37XZ?w=294&h=592); 剛打開頁面的時候，只顯示部分?jǐn)?shù)據(jù)，點擊加載更多的時候，就會...

Ashin 2019-06-28 18:26 評論0 收藏0
PHP+AJAX實現(xiàn)賬號注冊和登陸，附可用demo

摘要：前言登陸和注冊已經(jīng)是網(wǎng)站的標(biāo)配了，所以這是我們開發(fā)學(xué)習(xí)過程中必學(xué)的了。其實很容易實現(xiàn)，只需要懂?dāng)?shù)據(jù)庫的增刪改查，還有的條件語句即可做出來。前言登陸和注冊已經(jīng)是網(wǎng)站的標(biāo)配了，所以這是我們web開發(fā)學(xué)習(xí)過程中必學(xué)的了。其實很容易實現(xiàn)，只需要懂?dāng)?shù)據(jù)庫的增刪改查，還有if_else的條件語句即可做出來。目錄 css --Login-Reg.css server ...

mrcode 2019-07-01 11:18 評論0 收藏0