css3--字體
阿新 • • 發佈：2018-05-15
div 設計師 ati IE 規則 margin 自動 lang HA
以前CSS的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用CSS3，網頁設計師可以使用他/她喜歡的任何字體。
當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶。
在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然後指向該字體文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css字體</title> <style type="text/css"> * { margin: 0; padding: 0; } @font-face { font-family: myFirstFont; /*定義名稱*/ src: url(‘Sansation_Light.ttf‘); /*指向文字文件*/ } div { font-family: myFirstFont; } </style> </head> <body><div>使用css3,網站終於可以使用字體以外的預先選擇"合法"字體</div> </body> </html>
我電腦上下載了這個字體文件
所以我引用了電腦上提前下載好的字體文件
(引用路徑URL時請使用小寫字母的字體，大寫字母在IE中會產生意外的結果)
@font-face {
font-family: myFirstFont;
src: url(‘sansation_light.ttf‘); /*引用了小寫的字體文件*/
}
效果如下：
我們來對比一下之前沒引用字體文件的時候是這樣的:
css3--字體