回答:
次のOTF
ように@ font-faceを使用してフォントを実装できます。
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
ただし、さまざまな最新のブラウザーをサポートする場合はWOFF
、TTF
フォントタイプに切り替えることをお勧めします。WOFF
タイプはすべての主要なデスクトップブラウザーによって実装されますが、TTF
タイプは古いSafari、Android、iOSブラウザーのフォールバックです。フォントがフリーフォントの場合は、たとえばonlinefontconverterを使用してフォントを変換できます。
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
まだ存在しているほとんどすべてのブラウザーをサポートする場合(もうIMHOは不要)、次のようなフォントタイプを追加する必要があります。
@font-face {
font-family: GraublauWeb;
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.woff") format("woff"), /* Modern Browsers */
url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}
これらすべてのタイプが実装されている理由とそのハックについて詳しくは、こちらをご覧ください。どのブラウザでどのファイルタイプがサポートされているかの詳細なビューを取得するには、以下を参照してください。
お役に立てれば
"
コード例に引用符()がありませんか?
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
これは.ttfでクロスブラウザーで動作します。(ウィキペディアでは、.otfは主に.ttfと下位互換性があると述べています)そうでない場合は、.otfを.ttfに変換できます
ここにいくつかの良いサイトがあります: