javascript - Chrome OS (シークレット) および Linux Chrome Web フォントの表示の問題

Question

さまざまなプラットフォームで Web フォントをテストしているときに、奇妙な問題に遭遇しました。私はWebkit メディアクエリと組み合わせたJavascript チェックを使用してWindows Chrome フォントレンダリングの問題navigator.appVersionを回避していました (Chrome と Safari は Webkit であり、Windows Safari の場合は除外できるため)、その過程で新しい問題が発生しました。

画像などを保存せずにページを見るための簡単な方法としてシークレットモードでテストしましたが、これは私にとって新しいものでした。

に続くelse句内のアクションの前後にコンソールデバッグを追加したif(navigator.appVersion.indexOf("Win")>-1ので、間にある不適切な構文によってループが壊れていないことがわかり、エラーがスローされません。

これは Chrome OS のバグかもしれないと思ったのですが、Linux Mint ではどちらのタイプの Chrome ウィンドウでもフォントが読み込まれません。キャッシュ、Cookie、およびイメージ化されたファイルをクリアしても、どちらの OS にも影響はありません。

スクリーンショット:

Chrome OS 通常のウィンドウ (= Windows 8 Chrome)、
CrOS シークレットウィンドウ (= Linux Mint Chrome)"loaded" -どちらの場合もコンソールにログが記録<style>され、期待どおりに要素が DOM に挿入されます。

ここで矛盾をどのように調整できるかについて少し途方に暮れています.Javascriptが実行される場合があるため、何が問題なのか混乱しています。この件についてスペシャリストフォーラムに連絡するのは気が進まないのですが、ある種の Chrome 開発者グループに連絡したほうがよいかどうか教えてください。

誰かが自分でテストしたい場合は、スクリーンショットのページをご覧ください。

また、権限に関連する問題が発生した場合に備えて、シークレットモードで GitHub と Google アカウントにログインしようとしましたが、何も変わらず、それでも Windows との不一致が説明されませんでした (シークレット/通常の両方で動作)。 . ファイルはパブリック GitHub リポジトリに保存されており、私のサイトでフォントレンダリングがない状況でも、ブラウザーで確実にアクセスできます。

<script>
if (navigator.appVersion.indexOf("Win")>-1) {
    console.log("Win test")
    chromeQuery = document.createElement('style');
    chromeQuery.setAttribute('type','text/css');
    chromeQuery.innerHTML = "@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome-specific SVG font */ @font-face{ font-family: \"SEGOEUIL\"; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format(\"svg\"), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'); font-style: italic; } }";
    document.querySelector('head').appendChild(chromeQuery);
}
else {
    fontload = document.createElement('style');
    fontload.setAttribute('type','text/css');
    fontload.setAttribute('id','fontload')
    fontload.innerHTML = "@font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot'); src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg'); font-style: italic; }";
    document.querySelector('head').appendChild(fontload);
    console.log('loaded')
}
</script>
<noscript><style id="fontload" type="text/css">

@font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot');
        src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg');
        font-weight: normal;
    }

    @font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot');
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg');
        font-weight: bold;
        font-style: normal;
    }

    @font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot');
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg');
        font-style: italic;
    }

</style></noscript>

編集リソースパネル内にフォントが表示されないため、成功がどのように見えるかわかりません — opentype フォントのように見えるものは、ある種の (レイテンシー?) エラーを示していることがわかります。関連する？

(Source Code Pro は使用しておらず、アイコンのフォントはテキスト用ではありません)

score 1 · Accepted Answer

いくつかの点が間違っているように見えます:

挿入されたスタイルは<noscript>タグで囲まれているため、フォントは JavaScript が無効になっている場合にのみ読み込まれます
ルール@font-faceでは、カスタムフォントを 1 つのファミリーだけにマップする必要があります。だからfont-family: "SEGOEUIL";代わりにfont-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
最初のルールは SEGOEUIL のローカルにインストールされたバージョンを使用しようとし、もう 1 つは常に githubusercontent.com からロードします。そのため、ユーザーが別のバージョンをインストールした場合、フォントの外観が変わる可能性があります。
予期しない結果を回避するには、3 つの宣言すべてに対してfont-weightandを設定します。font-style

これを変更すると、Chrome のページが修正されます。

javascript - Chrome OS (シークレット) および Linux Chrome Web フォントの表示の問題

1 に答える 1

Related

Reference