字体不适用于自定义语言字符 [英] Font Face not working for custom language characters

问题描述

不知道我如何在jsFiddle中重现这个，但我会尽量解释这个问题，我可以。

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

我们正在导入一个购买的字体到CSS：

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">

以下是结果：

img src =https://i.stack.imgur.com/Qox2g.jpgalt =enter image description here>

仔细检查和一些测试我发现单词numero中的重音e正沿着字体堆栈向格鲁吉亚降级。

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.

我可以想到的唯一原因是重音字符在那个大小是不可用的，但更多的测试后，这不是这样的情况。我可以将导入的字体大小设置为其他标签中的任何大小（即 - div，p，span等），重音字符不会降级到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.

发生在输入标记的placeholder属性中。我可以在所有主要浏览器中重现。

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

这是一个监督与placeholder属性的实现吗？

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

推荐答案

结果当生成网络字体文件时，Font Squirrel生成器未正确配置。

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

必须选择以下Font Squirrel选项才能生成正确的语言字形：

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

点击自定义子集选择以下选项：

字符编码：Mac Roman

Character Encoding: Mac Roman

字符类型：选中此部分中的所有复选框

Character Type: Selected all checkboxes in this section

语言：英语，法语， > etc。

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.

这篇关于字体不适用于自定义语言字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！