我有一个名为 Roboto Condensed
的自定义字体。
我已将所有字体放入一个字体文件夹中。
我有一个 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
并忽略其他类型,因为自定义字体确实加载了。
我做错了什么吗?这可能是预期的吗?
最佳答案
因为,您的代码是正确的,我假设您在 IIS 服务器下,所以您需要创建这 2 个缺失的 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>
关于css - 如何在所有浏览器上正确导入自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37060612/