0 
<html>

<head>
<title> </title>

<body>
    <font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>

</head>

</html>

このスニペットは、意図したフォントで文を表示しません。この理由は何ですか？

注: font タグが HTML 5 でサポートされておらず、HTML 4 で非推奨になっていることは承知しています。

4

4 に答える 4

4

ここには 2 つの基本的な問題があります。HTMLface属性 (およびそれに対応する CSS のプロパティ)には、フォント ファイルの URL ではなく、値としてfont-familyフォント ファミリ名file:が必要であり、 URL は本質的にシステムに依存しており、機能しない可能性があります。多くの状況で。

CSS ファイルがあるディレクトリのサブディレクトリにフォント ファイルalpha_kufi_regular.ttf(フォント名にスペースは使用しないでください。URL ではスペースは許可されていません) が配置され、ブラウザーが TrueType フォントを「Web フォント」としてサポートしている場合、次のように動作します。 fonts」 (これは「Web フォント」の使用法である必要はありませんが、ローカルである可能性があります。手法は同じです):

<style>
@font-face {
    font-family: AlphaKufi;
    src: url('fonts/alpha_kufi_regular.ttf');
}
    </style>
<font face="AlphaKufi" size="+2"> This is a tester for a font, 
that may not be installed on the machine </font>

すべてのブラウザーが「Web フォント」として TrueType フォントをサポートしているわけではないため、Web ページでフォントを使用する場合は、FontSquirrel @font-face ジェネレーターの使用を検討してください。

通常、フォント設定には HTML よりも CSS を使用する方が適切ですが、それは別の問題です。理論的には、「Web フォント」は HTML<font face="...">でも動作する必要はありませんが (仕様でそれを要求することはありません)、実際には動作します。

于 2012-12-27T12:25:14.367 に答える
1

file://参考文献は見つかりませんが、プロトコル (ローカルファイルシステム)を使用してフォントにアクセスできないというのが私の推測です。これは、ページがオンラインであるか、ローカル サーバー (http://localhost または同等のもの) を介してアクセスされている場合に当てはまります。

また、これまでに使用する理由はまったくありません<font>。ブラウザーが完全にサポートしていないため、機能しない可能性があります。

edit : 実際、<font>フォント名の代わりにフォント ファイルの使用をサポートしたことがあるかどうかはわかりません。

フォント ファイルを提供するための解決策は、CSS の@font-face.

于 2012-12-27T12:12:14.287 に答える
0

の属性がフォント ファイルへfontのfaceパスを取らないためです。フォント名のカンマ区切りのリストを取ります。ブラウザは、インストールされているフォントをシステムで検索し、そこから関連するフォントを読み込みます (存在する場合)。

独自のものを指定したい場合は、おそらくCSS @font-faceを使用する必要があります。

于 2012-12-27T12:26:25.340 に答える
0

Google Web Fonts API を使用して Web フォントをページに追加する :

<html>

<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
  body {
    font-family: 'alpha kufi regular';
    font-size: 48px;
  }
</style>
<title> </title>

<body>
    <div>This is a tester for a font, that may not be installed on the machine</div>
</body>

</head>

</html>

〜参考

于 2012-12-27T12:45:28.293 に答える