web-dev-qa-db-ja.com

Safariフォントのレンダリングの問題

以下に示すように、ChromeのTexta-Lightフォントは、Safariとは完全に異なって表示されます。Chrome下のSafariイメージはiOSで撮影されたもので、何らかの理由で、2ビットのテキストが存在するかのようにフォントが表示されます。

私は解決策を探しましたが、うまくいくものが見つかりませんでした。 -webkit-font-smoothing: subpixel-antialiased;を使用してみましたが、 この質問 によると、コードはもう機能していません。

Chrome：

Chrome font-rendering

iOS上のSafari：

Safari font-rendering

上記の画像のコードは次のとおりです。

h2 {
    font-family: 'Texta-Light', sans-serif;
    font-size: 3.5em;
    line-height: 1.2em;
}

これに対する解決策はありますか？

cssgoogle-chromefontssafarirendering
34
Pav Sidhu

Safariにはフォントに関する問題があります。重複テキストの問題に対する最も簡単な修正は、フォントの太さを明確にすることです。

font-weight: 400;

LuchoのJavascriptのテキストストロークソリューションとフォントウェイトの指定を使用すると、テキストがChrome上と同じになります。

10
Pav Sidhu

Safariでは、テキストレンダリングというCSSプロパティがデフォルトで設定され、optimizeSpeedに設定されています。変更したいのは：

text-rendering:optimizeLegibility;

enter image description here

から https://css-tricks.com/almanac/properties/t/text-rendering/

次の4つの値があります。

•自動（デフォルト）-ブラウザーは、テキストの描画中に速度、読みやすさ、および幾何学的精度を最適化するタイミングについて推測を行います。ブラウザーごとにこの値の解釈が異なることに注意してください。

•optimizeSpeed-ブラウザは、テキストを描画するとき、読みやすさと幾何学的精度よりもレンダリング速度を強調します。カーニングと合字を無効にします。

•optimizeLegibility-ブラウザーは、レンダリング速度と幾何学的精度よりも読みやすさを重視しています。これにより、特定のフォントのフォントファイルに含まれている可能性のある特別なカーニングおよびオプションの合字情報を使用できます。

•geometricPrecision-ブラウザーは、レンダリング速度と読みやすさよりも幾何学的精度を強調します。カーニングなどのフォントの特定の側面は直線的に拡大縮小されないため、geometricPrecisionはこれらのフォントを使用してテキストを適切に表示できます。 SVGフォントがスケーリングされると、ブラウザーはピクセルサイズを計算し、次に最も近い整数に丸めます。 geometricPrecisionプロパティにより、より滑らかなスケーリングが可能になります。注：この流動的な値を適用するのはWebKitブラウザーのみです。Geckoは値をoptimizeLegibilityと同様に扱います。

追加の設定-webkit-font-feature-settingsがあり、そのうちの1つがカーニングです。

-webkit-font-feature-settings

h2 {
     -webkit-font-feature-settings: "kern" 1;
}
19
empedocle

あなたのコメントによると、あなたが.otf、他のファイルタイプも提供する必要があります。

これにより、iOs 4.2まではiOsで問題が発生する可能性があり、SVGはipadまたはiphoneでカスタムフォントを使用する唯一の形式でした。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

使用するのに最適なツールは、Font Squirrelの Webfont Generator です。

Edit：また、コメントで述べたように、font-weightはデフォルトでboldに設定され、lightフォントをロードしています。

10
Guy

JSを使用してテキストストロークプロパティを調整する投稿 が見つかりました。実際のコードは次のとおりです。

$(document).ready(function(){
    is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
    is_Explorer = navigator.userAgent.indexOf('MSIE') > -1;
    is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
    is_safari = navigator.userAgent.indexOf("Safari") > -1;
    is_opera = navigator.userAgent.indexOf("Presto") > -1;
    is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
    is_windows = !is_mac;

    if (is_chrome && is_safari){
      is_safari=false;
    }

    if (is_safari || is_windows){
      $('body').css('-webkit-text-stroke', '0.5px');
    }


  });

他の要素のテキストストロークを変更できます。それが役に立てば幸い。

8
Lucho

これを試して：

html, body {
    text-rendering: optimizeLegibility;
}

またはそのように動作しない場合、

html, body {
    text-rendering: geometricPrecision;
}
4
ZwartyZ

@luchoの答えに基づいて、私は同じアプローチを使用しましたが、<body>タグが読み込まれるとすぐに修正を適用します。これにより、iOS SafariのOpen Sansフォントが薄すぎる問題が修正されます。

<body>
<script>
  (function () {
    var ua = navigator.userAgent
    var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
    if (isIOSSafari) {
      document.body.style.webkitTextStroke = '.5px'
    }
  })()
</script>

代替アプローチ：

または、ios-safariのようなクラスを<html>タグに追加してから、通常どおりCSSを適用することもできます。

  <script>
  (function () {
    const ua = navigator.userAgent
    const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
    if (isIOSSafari) document.documentElement.classList.add('ios-safari')
  })()
  </script>
</head>

CSS：

.ios-safari {
  -webkit-text-stroke: .5px;
}
1
artnikpro