CSS3.0使用@font-face自定義字型
阿新 • • 發佈：2019-01-25
@font-face是CSS3.0裡面的模組，能將自定義的字型新增到網頁中。
index.css檔案
index.html檔案
<!doctype html>
<html>
<head>
<title>css3.0 @font-face</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>myblog</h1>
</body>
</html>index.css檔案
如以上程式碼所示，@font-face的語法規則如下:@font-face { font-family: '漢儀雪君體簡'; src:url('./fonts/漢儀雪君體簡.ttf') format('truetype')， url('./fonts/漢儀雪君體簡.eot') format('embedded-opentype')， url('./fonts/漢儀雪君體簡.woff') format('truetype'); font-weight: normal; font-style: normal; } h1{ font-family:"漢儀雪君體簡"; }
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
注：
1、YourWebFontName:此值為你自定義的字型名稱，最好是使用你下載的預設字型，他將被引用到你的Web元素中的font-family。如font-family: '漢儀雪君體簡';
2、source:此值指的是你自定義的字型的存放路徑；
3、format：此值指的是你自定義的字型的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種型別：truetype,opentype,truetype-aat,embedded-opentype,avg等。不同瀏覽器對字型格式的支援不同，一般來說至少需要.woff,.eot兩種格式字型，甚至還需要.svg等字型達到更多種瀏覽版本的支援。
4、weight和style:weight定義字型是否為粗體，style主要定義字型樣式，如斜體。
5.下載字型：https://www.google.com/fonts
獲取@font-face所需字型格式：https://www.fontsquirrel.com/tools/webfont-generator