1

このトピックに関する他の解決策を見てきましたが、必要な（または望む）結果をもたらしたものはありませんでした。

問題は、Mac が一部のフォントをぎこちない方法でレンダリングすることです。通常のスタイルであっても、フォントが太すぎます。気に障る！

そこで、フォントを細く見せるための CSS 回避策を考えてみました。私が考えることができるのは、テキストがぼやけすぎないことを願って、テキストの内側の影だけですが、これは言うよりも簡単です.text-shadowはこれをサポートしていません(何らかの理由で)。

誰かがこの効果を達成する方法について考えを持っていますか?

4

2 に答える 2

2

これは負け戦になると思います。現在、固定解像度 (72dpi、10 年ほど前のモニターの標準) のフォントのみを扱う可能性ではなく、次のことも考慮する必要があります。解像度が約 220 ～ 227ppi の一部の Mac の「Retina ディスプレイ」に対応します。

また、Retina ディスプレイで適切にスケーリングするために書き直されていないプログラムは OS によって補間される必要があることをどこかで読んだことも確かです。そのため、Mac から Mac、ブラウザからブラウザへ、同じフォントが使用される可能性は十分にあります。かなり違うように見えます。現時点で、Retina をサポートしていることを確認できるブラウザは、Safari (大きな驚きですよね?) と Chrome だけです。

(このテーマの詳細については、この質問を参照してください: https://apple.stackexchange.com/questions/54905/retina-macbook-pro-fonts-look-terrible )

メディア クエリを使用して、ピクセル比に基づいて使用するフォントを変えることができる場合があります。

@media all and (-webkit-min-device-pixel-ratio: 2) {
    /* all your retina-display-tweaked settings, here */
}
于 2012-11-05T15:47:37.947 に答える
0

多分これは少し多すぎる効果ですが、私はこれがあなたが探しているものだと思います.

:before & :after を使用したテキスト インナー シャドウ効果の追加

.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}

.depth:before { top: 3px; left: 3px }
.depth:after  { top: 4px; left: 4px }​

jsFiddle: http://jsfiddle.net/4GAkK/

于 2012-11-05T15:44:25.920 に答える