web-dev-qa-db-ja.com

フォントフェイスを使用してHTMLでローカルフォントを使用するには

私はローカルフォントを使用してhtmlのスタイルを適用しようとしていますが、以下はコードです。フォントは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>
htmlcssfont-face
7
anavaras lamurep

私は次の変更を行い、結果を得ました

  • フォントファミリーの引用符
  • ローカルの代わりにURLを使用する
  • 「\」から「/」への変更

注：local css関数を使用すると、開発者コンソールでリソースがロードされていないというエラーがスローされます。以下の変更されたコードを参照してください。

<!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>
8
anavaras lamurep

ファイルに正しいパスを使用してください。ホスト上でパスが機能しません。ホストには「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>
1
MN. Vala