不知道如何在 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”正在字体堆栈中降级为 Georgia。
我能想到的唯一原因是重音字符在该尺寸中不可用,但经过更多测试后,情况并非如此。我可以将导入的字体大小调整为其他标签(即 div、p、span 等)中的任何大小,并且重音字符不会降级为 Georgia。
它仅发生在输入标记的占位符属性中。我可以在所有主要浏览器中重现。
这是对占位符属性的实现的疏忽吗?