我的自定义Webfont未在任何浏览器中呈现

Question

请帮助修复我的代码。 我的自定义字体似乎没有在我打开的任何浏览器上呈现。

这是我的CSS代码。

@font-face{
font-family: 'Guildford';
src: url('../fonts/guildford_pro_titling-webfont.woff') format('woff'),
src: url('../fonts/guildford_pro_titling-webfont.woff2') format('woff2'),
src: url('../fonts/guildford_pro_titling-webfont.eot') format(embedded-opentype),
src: url('../fonts/guildford_pro_titling.otf') format('opentype') !Important;}

body {
font-family: 'Guildford', sans-serif;
background-image: url(../img/staropaquebackground.png);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
color: #ffffff;}

Answer 1

如果您used a validator，则会收到错误。

查看the example on MDN：

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

不要在每个网址前指定src:。

必须仅提及一次属性名称。

然后是逗号分隔的值列表。

Answer 2

试试这个：

@font-face{
font-family: 'Guildford';
src: url('../fonts/guildford_pro_titling-webfont.woff') format('woff'),
url('../fonts/guildford_pro_titling-webfont.woff2') format('woff2'),
url('../fonts/guildford_pro_titling-webfont.eot') format(embedded-opentype),
url('../fonts/guildford_pro_titling.otf') format('opentype') !important;
}

body {
font-family: 'Guildford', sans-serif;
background-image: url(../img/staropaquebackground.png);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
color: #ffffff;
}

你需要基本上用分号替换逗号并删除多个＆＃39; src：＆＃39;声明。 我建议任何带代码验证的代码编辑器，以避免将来出现此类问题。