Question

我在计算机上下载了一个包含我想要使用的字体的.ttf文件。我想做的是将它应用到我的html页面。我正在使用一个单独的.css样式表，在我的html文件的head部分中有一个链接。

我该如何应用此自定义字体？我试过用 @ font-face我在.css文件中有以下代码，但它不能工作：

@font-face {
    font-family: "chosenNameForCustomFont";
    src: url("fonts/customFontName");
}

p {
    font-family: chosenNameForCustomFont;
}

html文件中的段落仍然是正常的，没有字体。如果我将上面的代码放在实际的html文件中，那么＆＃34; style＆＃34;标签，它的工作原理。那我做错了什么？

Answer 1

通常，当我需要这样做时，我使用fontsquirrell generator。您需要上传需要使用的字体，它将生成一个使用它的示例。

生成字体工具包后，您将获得包含多个文件的包：

font_name.eot
font_name.svg
font_name.ttf
font_name.woff
font_name.woff2
font_name-demo.html   <-- Open it
stylesheet.css

打开.html后，您会在示例页面中看到您的字体完全正常工作。您需要将所有这些文件（.eot，.svg，.ttf，.woff，.woff2）复制到源文件夹中并引用.css中的文件（可能是您需要编辑目录，具体取决于你把字体文件放在stylesheet.css中：

@font-face {
font-family: 'font_name';
src: url('/relative/path/font_name-webfont.eot');
src: url('/relative/path/font_name-webfont.eot?#iefix') format('embedded-opentype'),
     url('/relative/path/font_name-webfont.woff2') format('woff2'),
     url('/relative/path/font_name-webfont.woff') format('woff'),
     url('/relative/path/font_name-webfont.ttf') format('truetype'),
     url('/relative/path/font_name-webfont.svg#fontnameregular')     format('svg');
font-weight: normal;
font-style: normal;

}

请记住，您使用的字体必须具有合法的网络嵌入资格。

希望有所帮助

在单独的.css样式表中正确使用自定义字体

1 个答案: