Font Face not working for custom language characte

2020-07-24 06:00发布

问题:

Not sure how I can reproduce this one in jsFiddle but I will try to explain the problem as best I can.

We are importing a purchased font into 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;
}

Then we apply that font to an input tag with a placeholder attribute:

.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; }

Our website supports French so the problem text is showing up when French accented characters are introduced to the placeholder:

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

Here is the result:

After careful inspection and some testing I have discovered that the accented "e" in the word "numero" is being degraded down the font stack to Georgia.

The only cause I can think of is that the accented character is not available in that size, but after more testing this is just not the case. I can size the imported font to any size in other tags (i.e. - div, p, span,etc) and the accented characters will not degrade to Georgia.

It only happens in the placeholder attribute of the input tag. I am able to reproduce in all major browsers.

Is this an oversight with the implementation of the placeholder attribute?

回答1:

Turns out Font Squirrel generator was not configured properly when the web font files were being generated.

The following Font Squirrel options must be selected in order for the correct language glyphs to be generated:

Click on the Custom Subsetting radio buton and selected the following options:

Character Encoding: Mac Roman

Character Type: Selected all checkboxes in this section

Language: English, French, etc.

I replaced my old web font files with the newly generated web fonts and the French characters showed up no problem.