字體
對該文章的理解：文章轉自http://www.w3cplus.com/content/css3-font-face
1、@font-face的語法規則：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
| YourWebFontName | 自定義的字體名稱 |
| source | 自定義的字體的存放路徑 |
| format | 自定義的字體的格式 |
| weight和style | weight定義字體粗體，style主要定義字體樣式，如斜體。 |
2、兼容瀏覽器
1）TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
2）OpenType(.otf)格式：
.otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
3）Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
4）Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】；
5）SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
這就意味着在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。
3、@font-face語法之一：Bulletproof @font-face:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}
爲了讓各多的瀏覽器支持：
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 自定義字體 */
@font-face {
font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_bauen_demo-webfont.eot'); /*ie9+*/
src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), /*ie6-ie8*/
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), /* chrome firefox*/
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), /* chrome firefox opera safari android ios 4.2+ */
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); /* ios 4.1- */
font-weight: normal;
font-style: normal;
}
/* 使用自定義字體 */
h2.neuesDemo {
font-family: 'NeuesBauenDemo'
}
</style>
</head>
<body>
<h2 class="neuesDemo">Neues Bauen Demo</h2>
</body>
</html>
4、獲取字體和字體格式轉換
1）獲取字體的網站：Google Web Fonts和Dafont.com，當然網上也還有別的下載字體的地方，這個Demo使用的是Dafont.com的Single Malta字體，這樣就可以到這裏下載Single Malta
2）@font-face所需的.eot,.woff,.ttf,.svg字體格式
翻牆到該網站：https://www.fontsquirrel.com/tools/webfont-generator
這樣就可以獲取不同格式的字體。
原文: http://www.w3cplus.com/content/css3-font-face © w3cplus.com
5. 引用Google的字體
該字體是從Google的線上字體api中獲取的，可以通過link標籤引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Condiment'>
<style>
.myheader {
font-family: Condiment, cursive;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<div class="myheader"> Test my own text !</div>
</body>
</html>
