在css中,可利用「@font-face」規則來載入外部字體文件,語法@font-face {font-family:字體名稱;src:url(外部字體檔案路徑);[font -weight:粗細值];[font-style:樣式值];}」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中,可利用「@font-face
」規則來載入外部字體文。
@font-face
是CSS3中的一個模組,它主要是把用戶自訂的Web字體嵌入到你的網頁中。
透過使用@font-face 規則,Web 設計師不必再使用任何一種“網路安全”字體。
在@font-face 規則中,您必須先定義字體名稱(例如myFirstFont),然後指向字體檔案。
@font-face的語法規則:
@font-face { font-family: 字体名称; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
font-family: 字體名稱
:自訂字庫名稱(一般設定為所引入的字庫名稱),後續樣式規則中則透過該名稱來引用該字庫。
src
:設定字型的載入路徑和格式,透過逗號分隔多個載入路徑和格式
srouce :字型的載入路徑,可以是絕對或相對URL。
format :字型的格式,主要用於瀏覽器識別,一般有以下幾種-truetype,opentype,truetype-aat,embedded-opentype ,avg等。
css使用外部字體檔案的方法
1、首先要下載好字體,並且放在了font目錄下
2、使用@font-face 規則引入字體並給名字取一個合適的名字
@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'); }
3、使用剛剛定義的字體
h1{font-family: fontnameRegular}
(學習影片分享: css影片教學)
以上是css怎麼載入外部字型文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!