如何在所有浏览器上正确导入自定义字体 [英] How to properly import custom font on all browsers

问题描述

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

I have a custom font called Roboto Condensed.

我已将所有字体放入字体文件夹中.

I have placed all the fonts into a fonts folder.

在这里我有一个eot，woff，woff2，ttf和svg，分别用于西里尔卡，希腊文，越南文和拉丁文，以及希腊文，西里尔文和拉丁文的扩展名.

I have a eot, woff, woff2, ttf, and svg all in here for cyrilica, greek, vietnamese, and latin along with extensions for greek, cyrillic and latin.

我正尝试将其导入到我的网站中，如下所示:

I am attempting to import it into my site like this:

/* 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文件.这些文件在那里，拼写正确，我在发布此文件之前对它进行了三重检查.

When I load the page and go to my developer tools I get two 404 errors, saying it can't find .woff and .woff2 files. The files are there, spelled correctly, I triple checked before posting this.

看看顺序，我假设chrome正在加载ttf，并且忽略了其他类型，因为自定义字体确实已加载.

Looking at the order, I am assuming chrome is loading ttf and ignoring other types because the custom font does load.

我做错什么了吗?这可能是预期的吗?

Am I doing something wrong? Is this maybe expected?

推荐答案

因为您的代码正确，所以我假设您在IIS服务器下，因此您需要创建这2种缺少的mime类型.

Because, your code is correct, I am assuming you are under a IIS server, so you need to create those 2 missing mime-types.

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

You can create either in:

• IIS7
• Plesk -(如果是是您的管理域"面板)
• Web.Config

• IIS7
• Plesk - (If this is your Admin Domain panel)
• Web.Config

因此，对于两种mime类型，标准的Web.config都将是这样的:

So a standard Web.config for both mime-types would be something like this:

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

这篇关于如何在所有浏览器上正确导入自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！