CSS @font-face规则引用外部服务器字体

时间 2021-01-29

标签 css html web chrome 浏览器服务器 ide svg 工具测试栏目 CSS 繁體版

原文原文链接

CSS 层叠样式表能够对页面进行更精细的样式设置，固然有些人就像自定义文字的字体，可是默认font-family 内置字体样式也就只有几种。css

如何才能把第三方字体引入呢？html

下面介绍一个CSS 规则 @font-face web

@font-face是CSS3中的一个功能，它主要是把自定义的Web字体嵌入到网页中，让网页上使用的字体能够不受客户端字体库的限制。chrome

这个功能是很是好用的，可是在使用中仍是会碰到一点问题，主要就是IE下会出现一些问题。浏览器

来看看@font-face介绍：
服务器

语法：ide

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

取值：工具

name :　字体名称。任何可能的 font-family 属性的值测试

url ( url ) :　使用绝对或相对 url 地址指定OpenType字体文件

sRules :　样式表定义

说明：

能够设置嵌入HTML文档的字体。此规则无默认值。

此规则使你可以在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含能够转换为 TrueType 字体的压缩字体数据，能够用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。此文件可使用 Microsoft WEFT 工具制做。

css示例：

@font-face {
    font-family: my_monaco;
    src: url(http://***.cn/font/monaco.ttf);
}

这样一来，font-family 就能够设置本身定义好的第三方字体 my_monaco 了。

测试：

调试界面报错，英文看不懂？不要紧咱们换IE来试试

@font-face 跨源请求失败。资源访问受限。也就是没权限

上面Chrome的说了，你应用的font源默认只容许自身域名使用，若是想外部域使用就必须在font服务器添加Access-Control-Allow-Origin http头部信息。

Access-Control-Allow-Origin 头信息,语法以下:

Access-Control-Allow-Origin: <origin> | *

origin参数指定一个容许向该服务器提交请求的URI。对于一个不带有credentials的请求,能够指定为'*',表示容许来自全部域的请求.

举个例子：容许来自http://youku.com 域的请求，你能够这样指定：

Access-Control-Allow-Origin: http://youku.com

我这里测试就设置为所有了：

例如 Access-Control-Allow-Origin:*

那么接下来就能够在font服务器的http配置里面添加响应的头部信息。

添加完成后，再测试：

Chrome测试

字体能够正常显示，Chrome无报错。

IE11 测试：

IE控制台无报错。

接下来咱们换个字体。

IE 测试：

报错，未能完成OpenType嵌入。

浏览器的兼容性

字体渲染是一件棘手的事情 - 尤为是老移动浏览器。你应该老是测试，你能够尽量多的设备支持。发现问题的速度越快越好。

最后，请记住，使用许多不一样的字体可能会减慢你的网站须要时间来加载全部这些字体！

并不是全部的浏览器都支持@ font-face的！

目前，@ font-face的支持

Firefox Opera Chrome Safari IE9及其以上版本

这是你会说他不支持IE9如下的浏览器吗，不用担忧，在旧的浏览器使用@ font-face时，不一样的浏览器支持特定的字体文件。

不一样的浏览器支持不一样的字体格式渲染：

IE浏览器：EOT
Mozilla浏览器：OTF，TTF
Safari浏览器：OTF，TTF，SVG
opera：OTF，TTF，SVG
Chrome浏览器：TTF，SVG

@ font-face的资源

Font Squirrel

http://www.fontsquirrel.com/home

Font Squirrel是一个很棒的网站，你应该很是熟悉。Font Squirrel是一家集优质商业使用的免费字体供您下载。最重要的是，他们有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，为您提供不一样的字体类型，你须要支持的每个浏览器。

@ font-face的工具包

Font Squirrel的套件部分是现成的工具包，其中包括多种字体格式，CSS和HTML代码的集合。全部你必须作的是选择一个字体，下载工具包，并复制代码。这是简单，。最重要的是，他们有一个很大的选择充满了巨大的字体。

@ font-face的工具包生成器连接以下：

http://www.fontsquirrel.com/tools/webfont-generator

另外一方面，你有工具包生成器，您上传您本身的字体，它为您提供了所需的全部代码。由于它创造了一个新的工具包为您的字体。全部你必须作的就是下载新的套件，并复制代码到您的网站。它也就是这么简单。然而，当使用本身的字体，请确保您有权利使用它- 不是全部的字体版权容许

最后：

为了使@font-face达到更多的浏览器支持，有一个独特的@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 */

}

/*format括弧里面的是字体后缀名即格式名*/

另外：如今国产浏览器的装机量很大，而国产双核浏览器兼容模式并不支持，能够经过如下方式直接强制切换到极速模式。

1，网页头部加入

在head标签中添加一行代码：

<html>
  <head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
  </head>
  <body>
  </body>
</html>

content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别表明用webkit内核，IE兼容内核，IE标准内核。

若页面需默认用极速核，增长标签：<meta name="renderer" content="webkit">

若页面需默认用ie兼容内核，增长标签：<meta name="renderer" content="ie-comp">

若页面需默认用ie标准内核，增长标签：<meta name="renderer" content="ie-stand">

2，另外为了保险起见再加入

CSS @font-face规则 引用外部服务器字体

CSS @font-face规则引用外部服务器字体