Question

我尝试使用本地字体在html中应用样式，下面是code.Font未应用于harlow类使用的元素

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: myFirstFont;
    src:local("C:\Users\Website\fonts\Harlow_Solid_Italic.ttf");
}

.harlow{
    font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>

Answer 1

我做了以下更改，我得到了结果

font-family
使用网址代替本地
改变＆＃34; \＆＃34;到＆＃34; /＆＃34;

注意：使用local css函数会在开发人员控制台中引发错误，指出未加载资源。请参阅下面的修改后的代码。

＆＃13;
＆＃13;
<!DOCTYPE html> <html> <head> <style> @font-face { font-family: "myFirstFont"; src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf"); } .harlow { font-family: "myFirstFont"; } </style> </head> <body> <div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div> <p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 2

根据浏览器的兼容性使用所有格式类型的字体

-只需在所有css文件样式之前添加以下代码，然后您可以将此字体系列用于CSS内的任何选择器文件。

@font-face {
         font-family: 'CustomHeading';
         src: url('./fonts/SFAtarianSystem.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/SFAtarianSystem.ttf') format('woff2'), /* Super Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf') format('woff'), /* Pretty Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./fonts/SFAtarianSystem.ttf') format('svg'); /* Legacy iOS */
}

Answer 3

使用正确的文件路径。您的路径在主机上不起作用。因为您的主机没有驱动器'c：/ ...'或类似的东西。因此您可以使用

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: myFirstFont;
    src:url("/fonts/Harlow_Solid_Italic.ttf");
}

.harlow{
    font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>

使用字体

3 个答案: