初めて使用する Web フォントフェイスを持ってきました。テスト サーバーにアップロードしましたが、1 台のラップトップを除くオフィス内のすべてのマシンで動作します。
ラップトップが機能しないことを発見した後、crossbrowsertesting.com ですべてのプラットフォームでテストを行ったところ、どのプラットフォームにも表示されないことがわかりました。
次に、Web フォントをサーバーにインストールする方法の説明とともに mywebsfontkit フォルダーをアップロードし、別のクロスブラウザー チェックを行ったところ、フォントが一部のブラウザーで動作し始めたにもかかわらず、自分のページに配置しようとすると失敗することがわかりました。
私はそれを機能させるためにいくつかの方法を試しました。1 - フォントへの完全な URL パスを入力しました - 何も起こりませんでした 2 - Web フォントをルート フォルダとサーバーのルート フォルダに配置しました 3 - さまざまな方法でフォント museo を呼び出してみました、つまり font-family : 'Museo' または font-family: 'Museo-700'.
私が投稿しているサンプルでは、nav で museo を museo-700 と呼んでいることがわかります。現在、私のマシンでは代わりに arial を呼び出しており、ヘッダーのテキストでは museo を font-family: 'Museo' と呼んでいます。フォントがすべてのブラウザで機能するとは限らないことは理解していますが、なぜあるファイルでは機能し、他のファイルでは機能しないのかわかりません。
.htaccess ファイル AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff にも追加しました。
フォントを保持するスタイル シートは、次のように呼び出されます。
<link rel="stylesheet" type="text/css" href="css/type.css" />
フォントを含むスタイルシート
@font-face {font-family: 'Museo-900';src: url('webfonts/23C024_0_0.eot');src: url('webfonts/23C024_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_0_0.woff') format('woff'),url('webfonts/23C024_0_0.ttf') format('truetype');}
@font-face {font-family: 'Museo-700';src: url('webfonts/23C024_1_0.eot');src: url('webfonts/23C024_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_1_0.woff') format('woff'),url('webfonts/23C024_1_0.ttf') format('truetype');}
@font-face {font-family: 'Museo-500';src: url('webfonts/23C024_2_0.eot');src: url('webfonts/23C024_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_2_0.woff') format('woff'),url('webfonts/23C024_2_0.ttf') format('truetype');}
そして、ナビゲーションとヘッダーのフォントを呼び出す方法
#nav ul li {
float: left;
position: relative;
color:#000;
font-family: 'Museo-700', Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}
.title-900 {
font-family: 'Museo-900', Arial, sans-serif !important;
font-weight: normal;
font-size:18px;
line-height:20px;
color:#9BC255;
padding-bottom:10px;
}