如何在网页中嵌入个性字体？

最新推荐文章于 2022-04-20 17:26:40 发布

osun2010

最新推荐文章于 2022-04-20 17:26:40 发布

阅读量679

点赞数

本文链接：https://blog.csdn.net/osun2013/article/details/17463403

版权

方案一、CSS：@font-face

这是CSS2中就已存在的一个属性（规则）。

语法：

font-face { font-family : name ; src : url ( url ) ; sRules }

说明：

1
2
3
4
5
6

设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType
字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据，可以用来提供
HTML文档使用该字体，或取代客户端系统已有的同名字体。此文件可以使用Microsoft WEFT工具制作。
到现在为止，已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了，
比较意外的是，IE系列浏览器也部分支持该属性。

@font-face　{
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
  font-style:　normal;
}
.fontFace{
  font-family: MyHelvetica;
}

IE中的用法：

@font-face|
　　font-family:　Goudy　Stout;
　　font-style:　normal;
　　font-weight:　400;
　　src:　url(GOUDYST0.eot);
}

方案二、利用Google Font API

此方案准确来说应该是对方案一的补充，因为实际上它还是使用@font-face来实现，只是url资源使用Google Font API库中的字体。

Google Font API调用起来非常方便，你可以用比较直接的方式：

或者你比较懒，就可以用这种方式：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
</link>