溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css如何引入外部字體

發布時間:2020-09-26 11:13:11 來源:億速云 閱讀:165 作者:小新 欄目:web開發

小編給大家分享一下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如何引入外部字體的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女