2

­を使用したいウェブサイトがあります。(ソフトハイフン)私が望むように単語を壊す。

Chromeのスクリーンショットはこちらをクリックしてください

問題のあるコンピューターはOSX(複数のバージョン)を実行しており、問題はChromeとSafari(複数のバージョン)の両方で発生します。OSとブラウザのバージョンがまったく同じコンピュータでは、これが異なって表示される可能性があります。スクリーンショットは、Chromev。21.0.1180.75を搭載したOS10.8で撮影されています。

ソフトハイフンは単語を分割し、ハイフン「-」を挿入するため、機能しているように見えますが、十字を使用してその長方形も生成します。

ウェブサイトは@fontfaceを使用しますが、それが何か関係がある場合は。

ありがとうございました!

4

3 に答える 3

3

これについては、Webkitのソフトハイフンのバグについて詳しく調べました。要するに、問題はHelvetica Light(およびAvenirなどの他のフォント)のバグとWebkitのフォントスタックのバグの組み合わせにあるようです。フォントスタックにArialを含めることで、修正できます。

font-family: "Apercu Light"、Arial、sans-serif;

于 2014-08-14T13:31:35.660 に答える
2

特にfonttestのWebサイトを考えると、問題の原因は2つあるようです。OSXの一部のWebKitブラウザーでは、テキスト行の中にグリフを使用してソフトハイフン文字をレンダリングするバグがあります。制御文字; StagSansWebフォントには、グリフがない(ブラウザにダミーのグリフを使用させる)か、奇妙なグリフがあります。これらのブラウザがさらにソフトハイフンをハイフンを許可するものとして扱う場合、Helveticaにソフトハイフンの空のグリフがある場合、これは症状を説明します。

これは非常に推測的、または推測的です。

より堅実な基準では、ハイフンが使用されたテキストのレンダリングは、標準で厳密に定義されていません。ブラウザがにハイフンを適用する場合、ブラウザfoo­barは「foo」の後に行末にハイフンを表示することになっていますが、標準ではどのハイフンが指定されていません。HYPHEN-MINUS(つまり、Asciiハイフン)、HYPHEN、またはグリフがある場合はSOFTHYPHENの場合もあります。多分何か他のもの。また、一部の言語には独自のハイフンがあるため、言語に依存する場合もあります。

したがって、WebKitブラウザがプロプライエタリプロパティのサポートを開始したことは理解できます-webkit-hyphenate-character。ただし、適切に実装されていないようです。Windows 7のChromeとSafariでテストすると、プロパティの他の値は問題なく機能しますが、ハイフンを追加せずに(ソフトハイフンを含む)単語を「ハイフネーション」することに気付きました(空のグリフを使用したかのように-webkit-hyphenate-character: "\00AD"

結論として、ハイフンでつながれる可能性のあるテキストにStagSansWebのようなフォントを使用しないことで、この問題を回避できると思います。フォントを変更することで問題を解決できる可能性があります。

于 2012-08-09T22:06:37.197 に答える
2

webkit/macでも同じ問題が発生しました。フォントを作成したファウンドリは私を助け、このソリューションを機能させました(Arialを追加)

font-family:"Apercu Light", Arial, Calibri, sans-serif; 

それ以外の

font-family:"Apercu Light", Calibri, sans-serif; 

これは、フォントファイルが更新されるまでの暫定的な解決策です。この特定のケースでは、Arialはwebkit/macでhelveticaよりも優れたサポートを提供していると思います。

于 2014-05-12T15:42:24.950 に答える