web-dev-qa-db-ja.com

IE9でAdobeフォントをCSS3 @ font-faceで動作させる

私は小さなイントラネットアプリケーションを構築する過程にあり、幸運にもAdobeフォントを使用しようとします。私が知っていたように、私たちの場合、それはライセンス違反ではありません。

。ttf/.otfバージョンのフォントを.woff、.eot、および.svgに変換したため、すべての主要なブラウザーをターゲットにしました。@ font-私が使用したフェイス構文は、基本的に Font Spring の防弾構文です。

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    src: url('myfont-webfont.eot?#iehack') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

HTTPヘッダーを変更して（Access-Control-Allow-Origin = "*"を追加）、クロスドメイン参照を許可しました。 FFおよびChromeでは完全に機能しますが、IE9では次のようになります：

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

フォントを.ttf/.otfから.woffに変換すると、。afmファイルも取得されることに気付きましたが、重要かどうか...

それを解決する方法はありますか？

[編集]-IIS 7.5の下でWebサイトをホストします（フォントも、静的コンテンツ用の個別のディレクトリとサブドメインの下）

cssinternet-explorercss3internet-explorer-9font-face
130
Piotr Szmyd

「CSS3114」エラーの修正方法のみを説明できます。
TTFファイルの埋め込みレベルを変更する必要があります。

適切な tool を使用して、installable embedding allowedに設定できます。
64ビットバージョンについては、@ user22600の answer を確認してください。

94
Knu

Knuが言ったように、 このツール を使用できますが、MS-DOS用にのみコンパイルされています。 Win64用にコンパイルしました。 ダウンロード 。

使用法：

  1. 変更する必要があるフォントと同じフォルダーに.exeを配置します

  2. コマンドラインでそのディレクトリに移動します

  3. embed fontname.fonttypeと入力し、fontnameをファイル名に、fonttypeを拡張子に置き換えます。つまり、embed brokenFont.ttf

  4. 全部終わった！これでフォントが機能するはずです。

36
user22600

Ieフォントの形式を「eot」ではなく「embedded-opentype」に設定する必要があります。例えば：

src: url('fontname.eot?#iefix') format('embedded-opentype')
33
stefannh

次のエラーが表示されました。

CSS3114：@ font-faceがOpenType埋め込み許可チェックに失敗しました。許可はインストール可能でなければなりません。
fontname.ttf

以下のコードを使用した後、私の問題は解決しました...

src: url('fontname.ttf') format('embedded-opentype')

助けてくれてありがとう！
乾杯、
レンジット。

12
Renjith

これを試して、この行をweb.configに追加してください。

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>
9
Dan

別の回答：法的問題。

これを行う前に注意すべきことがいくつかあります。まず、このエラーを取得するには、IEで要素を検査し、タブを切り替えてエラーを探します。コンソールに「CSS3114」が表示されると思います。

理解する必要があるのは、これはライセンスの問題です。 I.E. （しゃれを意図した）このエラーの原因となるフォントをロードしようとしている場合、そのファイルを使用するためのファイルに対するアクセス許可がありません。また、アクセス許可がない場合は、ライセンスを保持していない限り、このフォントをこの方法で使用することについての戦い（それ自体は非常にありそうにない）です。したがって、少なくとも「疑わしい」ことを知らせることができるので、「いいえ」を伝える唯一のブラウザであるIEに初めて感謝することができます。

とはいえ、ここにあなたの答えがあります：

最初に.cssで最適なコードを使用していることを確認し、そのための他のcss回答をいくつか参照してください。
IE 11 cssの例（IE9では、最新のすべてのブラウザーで動作するように調整する必要がある場合があります）：

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

次に、使用可能なWebフォントがあることを確認します（おそらく、他のブラウザーでフォントを見ることでこれを既に知っているでしょう）。オンラインフォントコンバーターが必要な場合は、こちらを確認してください。 https://onlinefontconverter.com/

最後に、「CSS3114」エラーを取り除きます。オンラインツールについては、こちらをクリックしてください。 https://www.andrebacklund.com/fontfixer.html

8
Patrick Knott

IE9では、TTFフォントの埋め込みビットをInstallableに設定する必要があります。 Generatorはこれを自動的に行いますが、現在、他の理由でAdobeフォントをブロックしています。近い将来、この制限を解除する可能性があります。

7
Font Squirrel

この問題のため、私は多くの時間を無駄にしました。最後に、私は自分で素晴らしい解決策を見つけました。 .ttfフォントのみを使用する前。しかし、IEで動作し始めた1つの追加のフォント形式.eotを追加しました。

私は次のコードを使用し、すべてのブラウザで魅力のように機能しました。

@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf), 
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}

@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}

これが誰かの助けになることを願っています。

7
Stack Developer

Nodejs/npmに精通している場合、 ttembed-js は、TTFフォントに「インストール可能な埋め込み許可」フラグを設定する簡単な方法です。これにより、指定された.ttfファイルが変更されます。

npm install -g ttembed-js

ttembed-js somefont.ttf
4
bendytree

Macユーザーとして、フォントの埋め込み許可を修正するために言及されたMS-DOSおよびWindowsコマンドラインツールを使用できませんでした。ただし、FontLabを使用してこれを修正し、許可を「すべて許可」に設定できることがわかりました。 Mac OS Xでフォント許可をInstallableに設定する の方法に関するこのレシピが、他の人にも役立つことを願っています。

4
buijs

問題は、サーバー構成に関係している可能性があります-フォントファイルの正しいヘッダーを送信していない可能性があります。質問に対する回答をご覧ください IE9はクロスオリジンWebフォントのダウンロードをブロックします 。

EricLawは、Apache構成に以下を追加することを提案しています

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>
3
Joseph Earl

Ttfpatchを使用する場合、「tableversionは0、1、またはhex：003でなければなりません」というエラーを受け取ったすべての人に対して、64ビットの埋め込みをコンパイルしました。私は何も変更していませんが、必要なライブラリを追加してコンパイルしました。自己責任で使用してください。

使用法：ConsoleApplication1 font.ttf

http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe

2
Christian

Cコードを実行する代わりにPHPスクリプトを使用してこれを実行する場合（または、私のようなMacを使用している場合、Xcodeでコンパイルするのに1年待つだけで済みません）開く）、フォントから埋め込み許可を削除するために使用できるPHP関数を次に示します。

function convertRestrictedFont($filename) {
    $font = fopen($filename,'r+');
    if ($font === false) {
        throw new Exception('Could not open font file.');
    }

    fseek($font, 12, 0);

    while (!feof($font)) {
        $type = '';
        for ($i = 0; $i < 4; $i++) {
            $type .= fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not read the table definitions of the font.');
            }
        }
        if ($type == 'OS/2') {
            // Save the location of the table definition
            // containing the checksum and pointer to the data
            $os2TableDefinition = ftell($font);
            $checksum = 0;

            for ($i = 0; $i < 4; $i++) {
                fgetc($font);
                if (feof($font)) {
                    fclose($font);
                    throw new Exception('Could not read the OS/2 table header of the font.');
                }
            }

            // Get the pointer to the OS/2 table data
            $os2TablePointer = ord(fgetc($font)) << 24;
            $os2TablePointer |= ord(fgetc($font)) << 16;
            $os2TablePointer |= ord(fgetc($font)) << 8;
            $os2TablePointer |= ord(fgetc($font));

            $length = ord(fgetc($font)) << 24;
            $length |= ord(fgetc($font)) << 16;
            $length |= ord(fgetc($font)) << 8;
            $length |= ord(fgetc($font));

            if (fseek($font, $os2TablePointer + 8, 0) !== 0) {
                fclose($font);
                throw new Exception('Could not read the embeddable type of the font.');
            }

            // Read the fsType before overriding it
            $fsType = ord(fgetc($font)) << 8;
            $fsType |= ord(fgetc($font));

            error_log('Installable Embedding: ' . ($fsType == 0));
            error_log('Reserved: ' . ($fsType & 1));
            error_log('Restricted License: ' . ($fsType & 2));
            error_log('Preview & Print: ' . ($fsType & 4));
            error_log('Editable Embedding: ' . ($fsType & 8));
            error_log('Reserved: ' . ($fsType & 16)); 
            error_log('Reserved: ' . ($fsType & 32));
            error_log('Reserved: ' . ($fsType & 64));
            error_log('Reserved: ' . ($fsType & 128));
            error_log('No subsetting: ' . ($fsType & 256));
            error_log('Bitmap embedding only: ' . ($fsType & 512));                         
            error_log('Reserved: ' . ($fsType & 1024));
            error_log('Reserved: ' . ($fsType & 2048));
            error_log('Reserved: ' . ($fsType & 4096));
            error_log('Reserved: ' . ($fsType & 8192));
            error_log('Reserved: ' . ($fsType & 16384));
            error_log('Reserved: ' . ($fsType & 32768));

            fseek($font, ftell($font) - 2);

            // Set the two bytes of fsType to 0
            fputs($font, chr(0), 1);
            fputs($font, chr(0), 1);

            // Go to the beginning of the OS/2 table data
            fseek($font, $os2TablePointer, 0);

            // Generate a new checksum based on the changed 
            for ($i = 0; $i < $length; $i++) {
                $checksum += ord(fgetc($font));
            }
            fseek($font, $os2TableDefinition, 0);
            fputs($font, chr($checksum >> 24), 1);
            fputs($font, chr(255 & ($checksum >> 16)), 1);
            fputs($font, chr(255 & ($checksum >> 8)), 1);
            fputs($font, chr(255 & $checksum), 1);

            fclose($font);

            return true;
        }
        for ($i = 0; $i < 12; $i++) {
            fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not skip a table definition of the font.');
            }
        }
    }

    fclose($font);

    return false;
}

このコードを実行する前に、必ずフォントファイルをバックアップしてください。フォントが破損しても私を責めないでください。

Cの元のソースを見つけることができます ここ 。

2
NobleUplift

eotファイルはttfを超えて配置する必要があることがわかりました。フォントが正しく表示されるとttfの下にある場合、IE9は引き続きエラーをスローします。

推奨：

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  src: url('../fonts/Font-Name.ttf')  format('truetype');
}

ない推奨：

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf')  format('truetype');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  }
0
shisaq

次のコードで解決できます

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
}
0
w.a.siddiqui

Ttfpatchツールを試してみましたが、うまくいきませんでした。 Internet Exploder 9と10はまだ不満を言っています。

このNice Git Gistを見つけて、問題を解決しました。 https://Gist.github.com/stefanmaric/a5043c0998d9fc35483d

コードをコピーしてcssに貼り付けてください。

0
Mark O'Russa

最近、.eotおよび.otfフォントでこの問題が発生し、ロード時にコンソールでCSS3114およびCSS3111エラーが発生しました。私のために働いた解決策は、.ttf形式のフォールバックで.woffおよび.woff2形式のみを使用することでした。 .woff形式は、ほとんどのブラウザで.ttfの前に使用され、フォントの埋め込み許可の問題（css3114）およびフォントの名前付けの不正な形式の問題（css3111）を引き起こさないようです。私の解決策は CSS3111とCSS3114の問題に関する非常に役立つ記事 にあり、また @ font-faceの使用に関するこの記事 も読んでいます。

注：このソリューションでは、フォントファイルの再コンパイル、変換、編集は必要ありません。 CSSのみのソリューションです。私がテストしたフォントには、.eot、.otf、.woff、.woff2、および.svgバージョンがあります。おそらく、試したときに3114エラーが発生した元の.ttfソースから生成されたものですが、.woffと。 woff2ファイルは、この問題の影響を受けないようです。

これがDIDが@ font-faceで私にとってうまくいくものです：

@font-face {
  font-family: "Your Font Name";
  font-weight: normal;
  src: url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype');
}

これがIEで@ font-faceのエラーを引き起こした原因です。

@font-face {
  font-family: 'Your Font Name';
  src: url('your-font-name.eot');
  src: url('your-font-name.eot?#iefix') format('embedded-opentype'),
       url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype'),
       url('your-font-name.svg#svgFontName') format('svg');
}
0
bwigs

これは私のために働く：

@font-face {
  font-family: FontName;
  src: url('@{path-fonts}/FontName.eot?akitpd');
  src: url('@{path-fonts}/FontName.eot?akitpd#iefix') format('embedded-opentype'),
    url('@{path-fonts}/FontName.ttf?akitpd') format('truetype'),
    url('@{path-fonts}/FontName.woff?akitpd') format('woff'),
    url('@{path-fonts}/FontName.svg?akitpd#salvage') format('svg');
}
0
Alena Kastsiukavets