4

フォント「Lato」、フォントの太さ100のGoogleのWebフォントAPIを使用しています。

デスクトップブラウザでは、すべてが正常に表示されることをテストしました。ただし、iPadまたはiPhone（両方ともiOS5）でWebページを表示すると、フォントが非常に薄く、正しく表示されているように見えるのはドットだけです。

Javascript、LINK-Tag、CSS @importメソッドを使用してフォントを実装しようとしましたが、すべて同じ結果になります。

FAQで、次のように述べられていることがわかりました。GoogleWeb Fonts APIは、Android2.2以降やiOS4.2以降（iPhone、iPad、iPod）を含む最新のモバイルオペレーティングシステムの大部分で確実に動作します。以前のiOSバージョンのサポートは制限されています。

つまり、うまくいくはずですよね？これを解決する方法はありますか？

ありがとう

4

5 に答える 5

5

本当に薄いフォント（ちなみにLatoも）を助けるために私が見たものはこれです：

-webkit-text-stroke-width: 0.1px;

とにかく、それはケースバイケースであり、クラス/メディアクエリを使用して、必要な場合にのみ適用するようにします（1.0未満のスケールでsafari（jsによって設定されたクラスを使用））。必要に応じて、より高いフロート値を試してください。

于 2012-03-12T13:00:49.447 に答える
2

非常に薄い書体と、MobileSafariが画面に収まるようにWebサイトを拡大縮小する方法との不幸な組み合わせのように思えます。通常、フォントには、サブピクセルレベルに達した場合にコンピューターがピクセルをペイントする方法を解釈できるようにするヒントがありますが、これはMobile Safariのスケーリングによって上書きされるため、半分のピクセルを半透明としてペイントします。

次のメタタグを追加することで、モバイルサファリがWebサイトをダウンスケーリングするのを防ぐことができます。

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0">

モバイルサファリでフォントを小さく表示したい場合、解決策は前の宣言を保持し、メディアクエリでフォントサイズを宣言することです。

@media only screen and (max-device-width: 480px) {
  font-size: 15px;
}

他のすべてが失敗した場合は、0pxのテキストシャドウを追加します。

.selector {
   text-shadow: 0 0 0 white;
}
于 2012-03-12T07:12:57.390 に答える
1

多分それはの-webkit-text-size-adjustせいです。試す

-webkit-text-size-adjust : none
于 2012-03-09T19:23:06.193 に答える
0

問題の要素のCSSにこれを追加してみてください。

-webkit-font-smoothing: subpixel-antialiased;

同様に、アンチエイリアスに影響を与える変換がある場合があります。また、試すことができます：

-webkit-transform: translate3d(0,0,0);

そしてさえ...

-webkit-backface-visibility: hidden;

クレイジー、私は知っています。

于 2012-02-18T00:30:23.450 に答える
0

使用していUltra-Light 100ますか？100に設定したが、ファイルが別の重みである場合、MobileSafariはより薄いバリアントをシミュレートしようとしている可能性があります。

いずれにせよ、試してみてください-webkit-font-smoothing: antialiased;。それでもうまくいかない場合は、300を試してください。

于 2012-03-11T15:31:01.830 に答える