Question

我正在尝试在我的网站上使用自定义字体，但在确定如何使用字体外观样式导入自定义字体时遇到一些麻烦。

我将此作为参考：http://css-tricks.com/snippets/css/using-font-face/

这是我的CSS：

@font-face {
    font-family: 'AlexBrush';
    src: url('../fonts/alexbrush-regular-webfont.eot');
    src: url('../fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
    src: url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
    src: url('../fonts/alexbrush-regular-webfont.woff') format(woff),
    src: url('../fonts/alexbrush-regular-webfont.ttf') format('truetype'),
    src: url('../fonts/alexbrush-regular-webfont.svg#svgFontName') format('svg');
}
.page-heading {
margin: 0;
color: #FFFFFF;
font-size: 3.5em;
font-family: AlexBrush;
}

我的HTML：

<h1 class="page-heading">Page Header</h1>

网址中的../是向上一个目录然后进入fonts文件夹。

我错过了什么？

更新代码：

@font-face {
    font-family: 'AlexBrush';
    src: url('../fonts/alexbrush-regular-webfont.eot');
    src: url('../fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
    src: url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
    src: url('../fonts/alexbrush-regular-webfont.woff') format('woff'),
    src: url('../fonts/alexbrush-regular-webfont.ttf') format('truetype'),
    src: url('../fonts/alexbrush-regular-webfont.svg#svgFontName') format('svg');
}

Answer 1

我遇到的问题是我为每一行添加了“src”属性，即使用逗号分隔行而不是“;”

CSS3字体表面不起作用

1 个答案: