Safari(Safari)のフォントが変に見える場合は、解析/CSS font-familyプロパティの要約を実行します.

https://medium.com/p/eadd80295a6からの投稿
作成

:2010-11-06

まず、ネットサーフィンの非開発者に解決方法を提供します.開発者は開発者の観点からのソリューション本を読んでください.

非開発者の立場から 解決策

Safariをブラウズしている間に、いくつかのサイトに奇妙なフォントが表示される可能性があります.これらのフォントは違和感があり、読みやすさが悪いように見えます.

赤いブロックで表されるフォントのようです.このときcssファイルをsafari設定に適用できますので、次のファイルをダウンロードしてください.
safari_defaultfont.zip
受信後、Safariウィンドウをアクティブにした場合  ⌘ + ,(comma)  クリックして環境設定パラメータに移動し、[拡張](Advanced)メニューの[スタイルシート](StyleTable)をクリックし、[Other...]をクリックします.ダウンロードしたファイルを受け入れるをクリックして完了します.

開発者の観点からのソリューション

次の2つのスクリーンショットでは、1つ目はSafari、2つ目はChromeの画面です.


これを見るとSafariがおかしいと思うかもしれませんが基準を守らないのは実はSafariでは全く間違いがありません結論から言うと. Webサイトの開発者の不注意で、ブラウザのdefault fontまで適用されたことを教えてあげることができます.これは、Webブラウザごとに異なるdefault fontがあることを意味します.もちろん今はあなたが何を言っているのか分かりません.CSSのfont-familyの動作原理と関連する環境を理解する必要があります.これからは、CSSのfont-familyプロパティをできるだけ理解し、フロントエンド開発者としてどのタイプのフォントを使用するべきかを教えてあげます.
開発者は非開発者向けソリューションのフォーマットでスタイルを適用して解決すべきではありません.同じ環境で複数のユーザーのプリファレンスを監視する必要があるため、スタイルシートの設定は変更されません.

font-ファミリーの原理

普通私たち.  font-family: [1순위], [2순위], [3순위], [...]  同じ原理に基づいて,現在のオペレーティングシステムにおけるフォントが適用されることが分かった.しかし、私たちはこれらだけを知っているわけにはいきません.正しいアルゴリズムを知らなければなりません.アルゴリズムは次のとおりです.

[1順位]のフォントがOSにあるかどうかを確認します.もしあれば、すぐにそれを適用します.

がない場合は、Webサーバに定義されたWebフォントがあるかどうかを確認します.

ウェブサーバはウェブフォントがあればダウンロードし、なければ[1位]のフォントがないとして、[2位]のフォントのチェックを開始します.

3-3の操作を繰り返します.

繰り返し操作を続行してフォントが見つからない場合は、ブラウザ設定で定義したdefault fontが使用されます.  serif(ネーミングボディ)、  sans-serif(ゴシック体、明朝体に露出した部分は整然としたゴシック体に切りました.-.-^)、  monospace(同じ幅の文字);  standard(最初の3つを含まない場合)は4種類あります.
この4つの文字のうちの1つをfont-familyプロパティの最後の要素として書いてこそ、デフォルトのfontがどのような性格の文字を使用するかを決定できます.したがって、ブラウザのプリファレンスパラメータでは、予め設定されたオペレーティングシステムフォントに従うため、フォントは絶対に失われません.私たちが開発した時、それが明体なのか黒体なのかを見て、それがどんな種類なのかを判断して、必ず最後にしなければなりません.  serif ,  sans-serif ,  monospace  どちらか書いてくださいインターネットの問題で上位優先フォントをダウンロードできない場合は、基本OSフォントを入手し、明体か黒体かを区別します(もちろん、最近の韓国語の多くはゴシックのような黒体です).  standard  私に何ですか?font-ファミリープロパティの最後のアイテム  serif ,  sans-serif ,  monospace  もしそうでなければ.  standard  default fontを適用します.一般的にサイトを見ると、間違いを明確に指摘することはありません.  standard  ついてきたのです.

デフォルトのフォント設定

次に、ブラウザのdefault font設定を参照します.Chromeブラウザでは、chrome://settings/次のスクリーンショットでCustomize fontsをクリックします.

マークの部分を見るとさっき習ったおなじみの表現が見えますよね?そこで設定したようにdefault fontを適用します.Fixed-width fontは単一空間です.

language-scriptによるデフォルトfontの設定

でもここだけ知って終わるわけにはいかない!!HTMLタグのlang属性によって異なるdefault fontが設定されており、上に見たスクリーンショットで見た設定は、HTMLタグにlang属性がない場合のデフォルト設定です.default fontのdefault language-script設定.langプロパティによってdefault fontが異なる場合があります.

Chromeで設定

他の言語-scriptの設定を表示しますか?今はブラウザでは見えません.  Advanced Font Settings  クロム拡張プログラムという名前のプログラムをインストールする必要があります.インストール後の拡張プログラムで、次のようにOptionsをクリックします.

Scriptでlanguage-scriptを設定する必要があります(language-scriptを続けます.1つの言語に複数の文字がありますが、デフォルトのフォント設定手順はISO 15924規格の非言語文字レベルのlanguage-scriptに従います).先ほど説明したようにdefaultは現在のクロムの設定と同じです.defaultでhangulを選ばないで

HTMLにlang="ko"が設定されていれば、このデフォルトフォントに従うのですが、先ほどとは違うのでしょうか?langの存在を知らないと、思いがけない変化が起こる可能性があります.chrome設定でdefault fontを変更したいのですが、サイトのフォントは変わらないでしょうか?未知の疑問が生じる.その時は道郎の属性を知る.  高度な機能設定クロム拡張を敷いてそこで変更します.

Safariでの設定

Safariは簡単です.設定でデフォルトのフォントを変更できるようになりましたが、現在は消えています.  https://trac.webkit.org/browser/trunk/Source/WebCore/Resources/DefaultFonts.plist.in?rev=114895  に表示されます.default日本語韓国語の設定を書いてみましょうやはり言葉によってフォントが違います.

整理する

まったく~いろいろ歩いた初めて見たスクリーンショットを消しましょう


ブラウザごとに異なる理由がわかります.実際、この2つの要素はCSSを使用しています.  font-family: '굴림',Gulim;  適用されます.オペレーティングシステムにないフォントでも、WebサーバがWebフォントを提供している場合は、ブラウザ別に表示されるフォントも統一されています.しかし、このサイトにはWebフォントが提供されていません.したがって、最後の要素を読みます.  serif ,  sans-serif ,  monospace  いいえ  standard  定義されたデフォルトのフォントに従います.これは、SafariとChromeで異なるデフォルトフォントが設定されているためです(このサイトは先頭にあるため、ハングル版のデフォルトフォントがロードされます).
では、開発者はどのように開発すればいいか知っています.以下はいくつかの会議です.font-family: A, B, C, [serif, sans-serif, monospace, X];一般に、

A、B、Cは、以下のようにウェブページフォントとして定義される.

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(/static_fonts/NanumGothic-Regular.eot), 
        url(/static_fonts/NanumGothic-Regular.woff2) format("woff2"), 
        url(/static_fonts/NanumGothic-Regular.woff) format("woff"),
        url(/static_fonts/NanumGothic-Regular.ttf) format("truetype");
}

A、B、Cフォントの性質により、最後にdefault font(一般に標準ではない)

を記入する.
これにより、ブラウザごとにフォントが異なるように見えなくなります.

n/a.結論

私たちは変えることができなくて、ウェブサイトの開発者が間違っていることを変えることができません.ただ、私がウェブプログラムを作るときは、上で学んだ正確な会議を使いましょう. :)

愚痴をこぼす

これは2日間の挿入によって得られた価値のある結果である.私はなぜ私の挿入時間がもっと長いのかを探求し、次回のTruble Shootingをより効果的に行うように改善します.シャベルが長くなったのは、簡単には作りたくないからですテストを行うときは、できるだけ簡単で変数を識別しやすい環境を作成する必要があります.既存の複雑なコードサイトで属性のみを変更し、ルールの変化を検出しようとしました.そうしないでください.この問題を簡単に解決するためには、Bodyを解放し、bodyの内容で簡単な文を配置し、headを1つずつ削除して、問題がどこにあるかを知る必要があります.最後のheadまで変わらなかった.絶望的でしたが、私の朗属性の問題かもしれないと思って削除しましたが、それは正しいです.テスト環境を簡素化しなければ、問題の解決は難しい.次からは最初からどうすれば簡単にできるかという習慣をつけましょう.