小編給大家分享一下css如何引入外部字體,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
我們引入css外部字體需要利用的是css3的@font-face,@font-face是什么呢?下面我們來看一看
@font-face是CSS3中的一個模塊,它主要是把自己定義的Web字體嵌入到你的網頁中。
首先我們來看一下@font-face的語法規則:
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
font-family: <YourWebFontName> :自定義字庫名稱(一般設置為所引入的字庫名),后續樣式規則中則通過該名稱來引用該字庫。
src :設置字體的加載路徑和格式,通過逗號分隔多個加載路徑和格式
說明:src屬性后還有一個 local(font name) 字段,表示從用戶系統中加載字體,失敗后才加載webfont。
src: local(font name), url("font_name.ttf")
srouce :字體的加載路徑,可以是絕對或相對URL。
format :字體的格式,主要用于瀏覽器識別,一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
接著我們就來看一下css外部字體引入的實現方法:
第一步,在CSS中引入字體并給名字取一個合適的名字,如下
首先要下載好字體,并且放在了font目錄下
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代表字體文件名的名稱
例如你的字體文件是php.ttf,那么上面的fontname全都要改為php
font-family定義字體的名字,接下來的src是加載字體文件的位置,之所有有多個url就是因為瀏覽器兼容問題。
第二步,使用剛剛定義的字體,如下
h2{font-family: fontnameRegular}
以上是css如何引入外部字體的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。