Не уверен, как воспроизвести это в 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">
Вот результат:
После тщательного изучения и некоторого тестирования я обнаружил, что буква «e» в слове «numero» с акцентом понижается по стеку шрифтов до Georgia.
Единственная причина, о которой я могу думать, это то, что акцентированный символ недоступен в таком размере, но после дополнительных испытаний это просто не так. Я могу изменить размер импортированного шрифта до любого размера в других тегах (например, - div, p, span и т. Д.), И символы с диакритическими знаками не будут ухудшаться до Джорджии.
Это происходит только в атрибуте placeholder входного тега. Я умею воспроизводить во всех основных браузерах.
Это недосмотр с реализацией атрибута placeholder?