如何在所有浏览器上正确导入自定义字体

Question

如何在所有浏览器上正确导入自定义字体

cssfontsfont-facecustom-font

3

我有一个名为Roboto Condensed的自定义字体。

我将所有字体放在一个名为fonts的文件夹中。

这个文件夹中包含了用于西里尔文、希腊文、越南文和拉丁文的eot、woff、woff2、ttf和svg格式的字体文件，以及带有希腊字母、西里尔字母和拉丁字母扩展名的字体文件。

我尝试像这样将它导入到我的网站中：

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Cyrillic Ext.eot");
  src:  url("fonts/Roboto Condensed Cyrillic Ext.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Cyrillic Ext.woff2") format('woff2'),
        url("fonts/Roboto Condensed Cyrillic Ext.woff") format('woff'),
        url("fonts/Roboto Condensed Cyrillic Ext.ttf") format('truetype'),
        url("fonts/Roboto Condensed Cyrillic Ext.svg#svgFontName") format('svg');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Cyrillic.eot");
  src:  url("fonts/Roboto Condensed Cyrillic.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Cyrillic.woff2") format('woff2'),
        url("fonts/Roboto Condensed Cyrillic.woff") format('woff'),
        url("fonts/Roboto Condensed Cyrillic.ttf") format('truetype'),
        url("fonts/Roboto Condensed Cyrillic.svg#svgFontName") format('svg');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Greek Ext.eot");
  src:  url("fonts/Roboto Condensed Greek Ext.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Greek Ext.woff2") format('woff2'),
        url("fonts/Roboto Condensed Greek Ext.woff") format('woff'),
        url("fonts/Roboto Condensed Greek Ext.ttf") format('truetype'),
        url("fonts/Roboto Condensed Greek Ext.svg#svgFontName") format('svg');
  unicode-range: U+0370-03FF;
}

/* greek */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Greek.eot");
  src:  url("fonts/Roboto Condensed Greek.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Greek.woff2") format('woff2'),
        url("fonts/Roboto Condensed Greek.woff") format('woff'),
        url("fonts/Roboto Condensed Greek.ttf") format('truetype'),
        url("fonts/Roboto Condensed Greek.svg#svgFontName") format('svg');
  unicode-range: U+0370-03FF;
}


/* vietnamese */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Vietnamese.eot");
  src:  url("fonts/Roboto Condensed Vietnamese.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Vietnamese.woff2") format('woff2'),
        url("fonts/Roboto Condensed Vietnamese.woff") format('woff'),
        url("fonts/Roboto Condensed Vietnamese.ttf") format('truetype'),
        url("fonts/Roboto Condensed Vietnamese.svg#svgFontName") format('svg');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Latin Ext.eot");
  src:  url("fonts/Roboto Condensed Latin Ext.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Latin Ext.woff2") format('woff2'),
        url("fonts/Roboto Condensed Latin Ext.woff") format('woff'),
        url("fonts/Roboto Condensed Latin Ext.ttf") format('truetype'),
        url("fonts/Roboto Condensed Latin Ext.svg#svgFontName") format('svg');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src:  url("fonts/Roboto Condensed Latin.eot");
  src:  url("fonts/Roboto Condensed Latin.eot?#iefix") format('embedded-opentype'),
        url("fonts/Roboto Condensed Latin.woff2") format('woff2'),
        url("fonts/Roboto Condensed Latin.woff") format('woff'),
        url("fonts/Roboto Condensed Latin.ttf") format('truetype'),
        url("fonts/Roboto Condensed Latin.svg#svgFontName") format('svg');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

当我加载页面并打开开发者工具时，会出现两个404错误，说找不到.woff和.woff2文件。这些文件都在那里，拼写正确，在发布之前我三次检查过。

从顺序上看，我认为Chrome正在加载ttf并忽略其他类型，因为自定义字体确实已经加载了。

我做错了什么吗？这可能是预期的结果吗？

- Bagzli

我之前在Chrome上也遇到过这个问题。你尝试在其他浏览器中打开了吗？可能只是Chrome的一个奇怪问题，其他浏览器正常运行。 - Coleman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dippas · Accepted Answer

因为您的代码是正确的，我假设您正在使用IIS服务器，所以您需要创建这两个缺失的MIME类型。

您可以在以下任一位置创建：

IIS7
Plesk - （如果这是您的管理域面板）
Web.Config

因此，用于两个MIME类型的标准Web.config如下：

<system.webServer>
  <staticContent>
     <!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
     <remove fileExtension=".woff" />
     <remove fileExtension=".woff2" />
     <mimeMap fileExtension=".woff" mimeType="font/woff" />
     <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>