css3中的@font-face你真的瞭解嗎

時間  2020-06-14
標籤 css3 css font face 瞭解 欄目 CSS 简体版
原文   原文鏈接

css3中的自定義字體方法@font-face

@font-face屬性可讓咱們自定義網站字體屬性，而後引用到想要應用該字體的元素上。css

基本語法：

@font-face {
  font-family: <font-name>;
  src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;
  unicode-range: <unicode-range>;
  font-variant: <font-variant>;
  font-feature-settings: <font-feature-settings>;
  font-variation-settings: <font-variation-settings>;
  font-stretch: <font-stretch>;
  font-weight: <font-weight>;
  font-style: <font-style>;
  font-display: <font-display>;
}

屬性規則說明

font-family

給你引入的字體起一個專屬的字體名字，font-name，而後他會在元素font-family:中使用，如div{font-family:font-name}；html

src

用於指定加載字體文件的路徑或者加載本地字體css3

local

加載一個本地字體，font-name表示本地的字體名稱，好比Microsoft YaHei | 微軟雅黑；若是本地有應用此字體顯示文本。git

示例：github

/* 加載一個本地字體 */
@font-face{
  font-family: myFont;
  src: local('Microsoft YaHei');
}
/* 加載多個本地字體 */
@font-face{
  font-family: myFont;
  src:  local(黑體), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local(sans-serif);
}
/* 應用自定義字體 */
.box{
  font-family: myFont;
}

在上邊代碼中看到，能夠使用一個或多個local，多個之間用逗號分開，括號中的字體名稱能夠使用單引號或者雙引號括起來，也能夠不帶引號直接寫字體名稱，有空格的必須添加引號，可是隻能寫一個字體名稱；
上邊的寫法讓咱們在定義字體的時候變得方便不少，咱們只須要定義好自定義名稱而後直接引用該字體等同於下邊代碼：web

.box{
  font-family: 黑體, "Microsoft YaHei", "HelveticaNeue-Light", "Helvetica Neue Light", "PingFang SC", sans-serif;
}

url

表示服務器端提供的字體地址，這個也是能夠使用多個，多個之間用逗號隔開，通常寫多個是爲了瀏覽器兼容加載不一樣格式的字體。目前web能夠加載六種格式的字體：chrome

  1. EOT：全拼：Embedded_OpenType，是由微軟開發的字體格式規範，因此只適用於IE瀏覽器。詳細介紹

兼容：
image
兼容詳情瀏覽器

  1. TTF：全拼：TrueType，是一種輪廓字體標準，最先是由蘋果公司研發，後來成爲Mac OS、Microsoft Windows系統中最經常使用的字體格式。詳細介紹

兼容：
image
兼容詳情
3. OTF：全拼：OpenType，是可縮放計算機字體的格式，是由微軟和Adobe公司聯合開發。詳細介紹服務器

兼容：
image
兼容詳情
4. WOFF：全拼：Web Open Font Formatweb網絡開放字體格式，他是專爲網絡設計的一種字體格式，WOFF是把OpenType和TrueType字體進行了封裝，並進行了壓縮優化，它使用了普遍應用的zlib壓縮，並添加了XML元數據，這種字體格式體積更小，適用於網絡傳輸，能夠使用戶體驗作到更好。詳細介紹網絡

兼容：
image
兼容詳情
5. WOFF2：它是WOFF的升級版，它使用Brotli進行字節級壓縮，比WOFF體積更小

兼容：
image
兼容詳情

  1. SVG：全拼：Scalable Vector Graphics可縮放矢量圖形，是一種基於可擴展標記語言（XML）的矢量圖像格式，用於二維圖形，並支持交互性和動畫，字體中就是使用svg技術來呈現文字樣式。我測試只有蘋果Safari支持； 詳細介紹

兼容：
image
兼容詳情

format

可選值，表示給加載的外部字體指定字體格式，用來告訴瀏覽器讓瀏覽器可以識別所使用的字體格式，可用的類型有 embedded-opentype, truetype, opentype, woff, woff2, svg。分別對應上邊咱們介紹的字體格式。

語法：

/* 加載一種字體格式 */
@font-face{
  font-family: "myFontName";
  src:  url('font.woff') format('woff');
}

/* 加載多個字體格式，兼容更多瀏覽器 */
@font-face{
  font-family: "myFontName";
  src: url('font.eot'); /* IE9*/
  src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('font.woff2') format('woff2'),
  url('font.woff') format('woff'), /* chrome、firefox */
  url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}

從上邊語法來看咱們能夠加載一個格式的字體文件，也能夠加載多個格式字體，之間用逗號分開，瀏覽器會優先讀取寫在前面的字體格式而且檢測是否支持，若是支持就使用該格式的字體文件。

font-weight

表示自定義字體規則的字重程度，咱們能夠給一個字體指定不一樣的粗細規則引用不一樣規格的字體文件。

語法：

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

取值說明：

  1. normal：默認值，表示該字體規則是在默認狀況下的字體，也就是在應用改字體的元素中不規定字體的粗細狀況或者font-weight: 400 | normal下應用該字體；
  2. bold：粗體，表示元素設置font-weight: bold | 700，或者使用<b>、<strong>元素的時候應用該字體。
  3. 400：也能夠設置成數值，在CSS Fonts Level 4以前的版本只能去100-900的100倍數值，以後的數值能夠去1-1000的任意數值。
  4. normal bold：能夠使用多個關鍵字來定義此字體規則，多個關鍵字之間用逗號分開，表示元素字重設置爲此關鍵字中的其中一個值時應用該字體。
  5. 300 500：也能夠使用多個數值來定義此字體規則。

取數值狀況下應該對應的每一個字體：

value 對應的字體的自重名稱
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

代碼示例：由於字體有版權限制，這裏咱們使用阿里的免費商用字體來演示

https://codepen.io/qwguo88/full/jObgQYG

從上邊的案例咱們能夠看出，先自定義了一個名爲FW的字體，而且使用font-weight定義不一樣字重使用不一樣的字體。在上邊的案例中定義了5中字重樣式，分別是bold：阿里巴巴-普惠體-Heavy，100：楊任東竹石體-Bold，200：站酷高端黑，300 600：龐門正道標題體2，900：思源黑體-粗
而後給div設置font-family:FW;最後咱們分別給這個div下的每一個段落設置不一樣的font-weight,段落的字體就會根據不一樣的字重來應用不一樣的字體。
咱們能夠把自定義字體當作咱們日常使用系統內置字體同樣，當咱們設置字體爲微軟雅黑，而且設置不一樣的字重他會在系統中尋找每一個自重對應的字體，而後來顯示。

font-style

表示自定義字體規則的樣式表現形式，咱們能夠給一個字體指定不一樣的樣式規則引用不一樣規格的字體文件。

語法：

font-style: normal | italic | oblique <angle>{0,2}

取值說明：

  1. normal：默認字樣式使用的字體規則，當咱們不設置或者設置成此值時的字體。
  2. italic：表示字樣式設置成斜體的時候使用的字體規則。
  3. oblique：表示字樣式設置成斜體的時候使用的字體規則。

當咱們同時定義italic和oblique規則的字體時，寫在後邊的生效所設置的斜體字體顯示。

代碼示例： https://codepen.io/qwguo88/full/RwWXONo

unicode-range

表示自定義字體規則的unicode字符範圍

語法：

/* unicode-range 取值規則 */
unicode-range: U+26;                /* 單個值 */
unicode-range: U+0-7F;              /* 字符編碼區間*/
unicode-range: U+0025-00FF;        /* 字符編碼區間 */
unicode-range: U+4??;              /* 通配符區間 */
unicode-range: U+0025-00FF, U+4??; /* 能夠寫多個值，多個值之間用逗號分開 */

取值說明：
取值規則：前邊是U+後邊跟上字符的charCode值

  1. 能夠是單個值，表示文本中只有該字符的字應用該字體。
  2. 能夠使用一個字符區間，表示文本中若是有在此區間的文字將應用改字體規則。
  3. 也能夠使用通配符來設置一個區間規則其中?表示一個16進制0-F的之間的值U+4??表示 U+400 到 U+4FF區間的字符編碼。
  4. 也能夠使用多個值，多個值之間使用逗號分開。

案例：https://codepen.io/qwguo88/full/XWXWqmP

從上邊案例能夠看出，unicode-range是用來規定應用當前字體規則的文字unicode碼在規則內的將以此字體規則顯示字體。
他能讓咱們來控制一個段落中的個別字的顯示效果，通常要顯示的字體規則排在最前面，將優先顯示。

font-display

設置自定義字體在沒有加載完的顯示方式取值以下：

語法：

font-display: auto | block | swap | fallback | optional
  1. auto：字體顯示策略由用戶代理定義。
  2. block：爲字體提供一個短暫的阻塞週期和無限的交換週期。也就是說等字體加載完之後字體顯示效果會自動更新成改字體
  3. swap：爲字體提供一個很是小的阻塞週期和無限的交換週期。也就是說等字體加載完之後字體顯示效果會自動更新成改字體
  4. fallback：爲字體提供一個很是小的阻塞週期和短暫的交換週期。也就是說等字體加載在過了必定的交互週期後加載完字體將不進行更新顯示
  5. optional：爲字體提供一個很是小的阻塞週期，而且沒有交換週期。也就是說等字體加載不進行更新顯示

參考網站

  1. https://webplatform.github.io/docs/tutorials/typography/font-face/
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display
  3. https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/
  4. https://www.w3cplus.com/css/font-display-masses.html

字體下載格式轉換網站

  1. https://www.fontke.com/tool/fontface/
  2. http://www.fonts.net.cn/
  3. https://fonts.google.com/

字體壓縮工具

  1. http://www.fonts.net.cn/ 字體天下
  2. http://www.ziticq.com/ 字體傳奇
  3. https://www.hellofont.cn/ 字由
  4. http://fontstore.baidu.com/static/editor/index.html 百度在線字體編輯器
  5. https://efe.baidu.com/ 百度字體處理
  6. https://www.fontsquirrel.com/tools/webfont-generator 字體格式換
  7. https://www.fontke.com/tool/fontface/ 字體轉換
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程