2

jsFiddle でこれをどのように再現できるかわかりませんが、できる限り問題を説明しようと思います。

購入したフォントを CSS にインポートしています。

@font-face {
    font-family: 'ForoItalicRegular'; 
    src: url('../Fonts/foro_italic/ForoIta-webfont.eot');
    src: url('../Fonts/foro_italic/ForoIta-webfont.eot?#iefix') format('embedded-opentype'),
    url('../Fonts/foro_italic/ForoIta-webfont.woff') format('woff'),
    url('../Fonts/foro_italic/ForoIta-webfont.ttf') format('truetype'),
    url('../Fonts/foro_italic/ForoIta-webfont.svg#Foro-ItalicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

次に、そのフォントをプレースホルダー属性を持つ input タグに適用します。

.m_hdr_glb_search input { width:230px; margin:0; padding:13px 0px 12px 5px; text-overflow:ellipsis; background:transparent; color:#221b33; font-size:0.750em; font-family:ForoItalicRegular,Georgia,serif; border:none; }

私たちのウェブサイトはフランス語をサポートしているため、フランス語のアクセント付き文字がプレースホルダーに導入されると、問題のテキストが表示されます。

<input type="text" placeholder="Quartier, ville ou numéro">

結果は次のとおりです。

ここに画像の説明を入力

慎重な調査といくつかのテストの後、「numero」という単語のアクセント付きの「e」が、フォント スタックでジョージアに劣化していることを発見しました。

私が考えることができる唯一の原因は、アクセント付きの文字がそのサイズで利用できないことですが、さらにテストした結果、そうではありません. インポートしたフォントを他のタグ (div、p、span など) の任意のサイズに変更でき、アクセント付きの文字がジョージアに劣化しません。

input タグの placeholder 属性でのみ発生します。すべての主要なブラウザーで再現できます。

これは、プレースホルダー属性の実装に関する見落としですか?

4

1 に答える 1

8

Web フォント ファイルの生成時に、Font Squirrel ジェネレーターが正しく構成されていなかったことが判明しました。

正しい言語グリフを生成するには、次の Font Squirrel オプションを選択する必要があります。

[カスタムサブセット化] ラジオ ボタンをクリックし、次のオプションを選択します。

文字エンコーディング: Mac Roman

Character Type : このセクションのすべてのチェックボックスを選択

言語：英語、フランス語など

古い W​​eb フォント ファイルを新しく生成された Web フォントに置き換えたところ、フランス語の文字は問題なく表示されました。

于 2012-09-13T18:00:08.123 に答える