css3字体@font-face

最新推荐文章于 2025-06-21 13:35:48 发布

转载最新推荐文章于 2025-06-21 13:35:48 发布 · 437 阅读

文章标签：

#web前端 #css3 #字体

前端web 同时被 2 个专栏收录

66 篇文章

订阅专栏

CSS3

13 篇文章

订阅专栏

本文详细解析了CSS3中@font-face的使用方法，包括语法规则、字体格式及浏览器兼容性。介绍了如何通过不同格式的字体文件实现跨浏览器支持，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字体

对该文章的理解：文章转自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

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>