12

開発中のページであるDroidSansでカスタムフォントを使用しています。特定のフォントサイズでは、下部が切り取られていますが、OperaおよびWebkitブラウザーでのみ使用できます。

Droid Sansを探してアルファベット全体を18pxで表示するGoogle独自のWebフォントページで簡単に再現できます：http ：//www.google.com/webfonts

小文字の場合は特に明確ですg。

行の高さを増やす/文字全体を表示するために使用できるCSSのトリック/ハックはありますか、それともフォントの特定のサイズのみに制限されていますか？

line-heightpaddingたとえば、何も変更しないでください。20pxはfont-size正常に機能し、現時点ではWindows7を使用しています。

編集：ちなみに、私はここで同様の質問を知っていますが、受け入れられた答えはフォントサイズを変更しており、残りの答えは適用されないため、あまり役に立ちません。

編集2：少なくとも今のところ問題を示している 例（スライドショーの下の左側の列Il Cerca Viaggi）。

編集3：どのバージョンかはわかりませんが、問題はWindowsに限定されているようです。

編集4：問題が開発中のサイトに固有のものではないことを示すために、GoogleWebfontsのスクリーンショットを追加しました。

Chrome 16、Google Webfonts

4

5 に答える 5

11

これは私が探している解決策ではありませんが、他の人に役立つ可能性のある解決策を見つけました。

元のスタイルシートでは、フォントを次のように指定しました。

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
         url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

これにより、Webkit ブラウザがwoffファイル / フォーマットを使用するようになります。

フォント仕様の順序を変更し、svg仕様の後にハッシュタグを削除すると (なぜそこにあるのですか?)、Webkit ブラウザーはsvgファイル / フォーマットを使用するようになります。

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.svg') format('svg'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

これで問題は解決し、すべての文字が正しく表示されます。

ただし、少なくとも Windows 7 64 ビットでは、svgフォントはフォントほどシャープではなくwoff、ぼやけているため、このソリューションは使用せず、より良いソリューションを期待しています。

于 2011-12-23T14:35:07.610 に答える
7

同様の質問に対して、ある回答では、これは特に Windows フォント レンダリングの問題のように見えますが、Web 用に最適化されていないフォントを含む TrueType フォント (TTF) の svg、eot、および otf バージョンをホストすると修正されたことが示唆されました。そのプロバイダーの問題。可能であれば、DroidSans フォントのクリーンで最適化されていないバージョンを入手し、Web フォントを自分でエクスポートしてください。

編集：申し訳ありませんが、私は休日に出かけていて、SOにアクセスできませんでした。戻ってきてから、Windows マシンでこの問題を引き起こしている正確な原因について少し調査しました...

問題は、Windows マシンで OpenType 形式がレンダリングされる方法にあるようです。切り捨てられたディセンダーの問題は、ソフトウェアの種類を超えて、OpenType をレンダリングしようとする複数の Windows プログラムに影響を与えるようです。現在、Embedded OpenType 形式 (EOT) バージョンのフォントが CSS ドキュメントの最初にリストされています@font-face。Chrome と Opera はどちらもこの形式を認識するため、後続のソース宣言を無視し、EOT を使用してフォントを表示します。残念ながら、OpenType フォント自体に適用して、それをレンダリングするソフトウェアに、Windows マシンで最も低いディセンダーに適切な行間隔を許可するように強制する簡単な修正方法はないようです...

ただし、閲覧者のブラウザに提供するフォントについては、選択することができます。個人的には、SVG バージョンを最初に CSS に配置することをお勧めします。この形式を認識しないブラウザーの場合は、TrueType (TTF) を 2 番目に、次に WOFF を、次に上記のいずれもサポートしないブラウザーの場合は EOT を提案します (いくつか古いバージョンの IE は、OpenType を排他的にサポートしているようです)。SVG レンダリングが気に入らない場合は、まず TrueType を試してください。

または、DroidSans の TTF を FontSquirrel でダウンロードし、Typografなどのソフトウェア パッケージを使用してWebフォント (EOT、WOFF、SVG) をエクスポートすることもできます。ただし、最初に上記で概説したように、CSS のソースを再配置してみてください。

別の編集: TTF の代わりに TIFF を誤って使用したことは、将来の混乱を避けるために編集されました。取り違えでごめんなさい、皆さん...

于 2011-12-22T22:22:07.610 に答える
2

よくわかりませんが、パディングが機能するようにこれを追加してみてください

display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;

行の高さを通常に設定します。これはFirefoxのバグであり、行の高さを%で使用します。これでうまくいくと思います

于 2011-12-21T22:55:05.077 に答える
1

それはすべてフォント自体に要約されます。

ここを見てください
http://jsfiddle.net/DdMej/2/

最初の行は Drod Sans by Google フォントを使用しています。2 行目は、サイトにあるフォントを使用します。

編集 1
スクリーンショット
http://imageshack.us/photo/my-images/811/screeniy.png/
ここに画像の説明を入力

于 2011-12-26T21:40:45.420 に答える
0

私も、レンダリングされたテキストの下部で Google フォントの「Lato」が切り取られているのを見ていました。私の場合、Google Fonts を使用する代わりに、フォント ファイルをローカルで提供する必要がありました。これを行うには：

  • Font2Web でフォントを .ttf から webfont ファイルに変換しました
  • localhost からフォント ファイルを静的ファイル アセットとしてローカルに提供する
  • 防弾 @font-face 実装で CSS にフォントを含めました

これにより、レンダリングされたテキストのカットオフの問題が解消されました。

于 2014-12-09T21:06:03.573 に答える