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

然后我们将该字体应用于具有占位符属性的输入标签：

.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 等），并且重音字符不会降级为 Georgia。

它只发生在输入标签的占位符属性中。我能够在所有主要浏览器中重现。

这是对占位符属性实施的疏忽吗？

4

1 回答 1

8

结果是在生成 Web 字体文件时，Font Squirrel 生成器没有正确配置。

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

单击自定义子集单选按钮并选择以下选项：

字符编码：Mac Roman

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

语言：英语、法语等

我用新生成的网络字体替换了旧的网络字体文件，法语字符显示没有问题。

于 2012-09-13T18:00:08.123 回答