css3字体@font-face

╰+哭是因爲堅強的太久メ 2022-05-10 12:14 149阅读 0赞

**字体**

对[该文章][Link 1]的理解：文章转自[http://www.w3cplus.com/content/css3-font-face][Link 1]

1、@font-face的语法规则：

@font-face {
          font-family: <YourWebFontName>;
          src: <source> [<format>][,<source> [<format>]]*;
          [font-weight: <weight>];
          [font-style: <style>];
        }

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>YourWebFontName</td> 
   <td>自定义的字体名称</td> 
  </tr> 
  <tr> 
   <td>source</td> 
   <td>自定义的字体的存放路径</td> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>自定义的字体的格式</td> 
  </tr> 
  <tr> 
   <td>weight和style</td> 
   <td>weight定义字体粗体，style主要定义字体样式，如斜体。</td> 
  </tr> 
 </tbody> 
</table>

**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][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][https_www.fontsquirrel.com_tools_webfont-generator]

![font-download.png][]

**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>

![70][]

[Link 1]: http://www.w3cplus.com/content/css3-font-face
[Bulletproof _font-face]: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
[Google Web Fonts]: http://www.google.com/webfonts
[Dafont.com]: http://www.dafont.com/
[Single Malta]: http://www.dafont.com/single-malta.font
[https_www.fontsquirrel.com_tools_webfont-generator]: https://www.fontsquirrel.com/tools/webfont-generator
[font-download.png]: /images/20220510/6bdfa99d37b34952acd064a4acf1d731.png
[w3cplus.com]: http://www.w3cplus.com/
[70]: /images/20220510/5576ee86b8714f7e834235fc859582b6.png