4

私は Web サイトを構築しており、Tex Gyre Cursor という名前のフリー フォントを使用してクロス ブラウザーの互換性を取得しようとしています。これまでのところ、Googleで検索して見つけたいくつかの方法を試しました。

サイト 1、サイト 2 &サイト 3

Chrome、Firefox、Safari、Opera でローカルにテストしたときに機能しました。ただし、IEではありません。私は IE を気にする必要はありません。これはお尻に大きな苦痛を与えるからです。私は Tahoma をバックアップ フォントとして設定しています。

この問題は、FTP ファイル マネージャー経由でファイルをアップロードした後に発生します。Web ホストは GoDaddy です。

フォントファイルもアップロードしました。

サイトにアクセスしましたが、フォントは Tahoma です。これは、前述のすべてのブラウザーで発生します。

私は途方にくれており、問題を識別できません。

これはCSSでの私の最初の試みでした:

@font-face{    
    font-family:'TexGyreCursor';
        src: url('fonts/texgyrecursor.eot');
        src: local('texgyrecursor'), 
             local('texgyrecursor'), 
             url('fonts/texgyrecursor.ttf') format('truetype'),
             url('fonts/texgyrecursor.svg#font') format('svg'),
             url('fonts/texgyrecursor.otf');
}

私の2回目の試み：

@font-face{
    font-family:'TexGyreCursor';
    src: url('fonts/texgyrecursor.eot');
    src: url('fonts/texgyrecursor.otf');
}

さらに情報が必要な場合は、お知らせください:)

4

8 に答える 8

4

CSSフォントとファイルを別のサーバーでホストしているか、IE が絶対的な !@?#であるかに関係なく、多くのフォント埋め込みの問題に遭遇しました。

IE で 12 を押すと、開発者ツールが起動し、表示されているエラーを確認します (存在する場合)。次のエラーのいずれかが表示されている場合:

CSS3111: @font-face encountered unknown error.
my-font.eot

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
my-font.eot?

数か月前に開いたスレッドに従うことをお勧めします。@font-face import not working in offline website/different host using online fonts via CSS in IE only . これは IE のみの問題であるため、同じ問題が発生しても驚かないでしょう。フォントを別のサーバーに転送するときに、他の問題が発生しました。

今後フォントを埋め込む場合は、次の CSS コードを使用し、関連するすべてのファイル タイプが正しく変換されるようにすることを強くお勧めします。

@font-face {
    font-family:'My-Font';
    src:url('../includes/fonts/my-font.eot');
    src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/my-font.woff') format('woff'),
            url('../includes/fonts/my-font.ttf') format('truetype'),
            url('../includes/fonts/my-font.svg#my-font') format('svg');
    font-weight:normal;
    font-style:normal;
}
于 2013-01-11T05:07:59.203 に答える
1

丁度！解決策は、大文字と小文字を区別して css からフォントを呼び出すことです。たとえば、次のような同じ呼び出しではありません: url (font / arial.ttf) ARIAL.TTF ファイルは url (font / ARIAL.TTF) でなければなりません

于 2014-08-15T20:08:23.440 に答える
1

コードにエラーがあってはなりません。ブラウザまたはネットワークの問題である必要があります。

  1. すべてのキャッシュをクリアして、ページを数回リロードしてみてください。
  2. それでも問題が解決しない場合は、Chrome に移動してページを読み込み、 を押しF12て、[ネットワーク] タブに移動し、ページをリロードします。ブラウザーがフォント CSS ファイルとフォントをロードするかどうかを確認します。
  3. 404 Not Found エラーが発生した場合は、ブラウザで直接フォント ファイルを参照してください ( yourdomain.com/fonts/texgyrecursor.ttf)。
  4. フォント ファイルに直接アクセスできない場合は、アップロードしたかどうかを確認してください。次に、ファイルのパーミッションを確認します。
  5. それでもうまくいかない場合<link>は、Google Webfonts が提供するタグを追加してからアップロードしてみてください。

それが修正されることを願っています！

于 2013-01-11T04:45:29.647 に答える