Я думаю, что проблема - относительно высокая высота X века Готики. Попробуйте использовать ex единиц в вашей декларации font-size. ex единицы основаны на высоте, в отличие от em, px и pt.
Установка размера line-height на размер пикселя также поможет нормализовать высоту, но вызовет проблемы для пользователей, которые изменяют уровень масштабирования текста в своем браузере.
Редактировать: Я вернулся и протестировал, и бывшие подразделения не помогут. Столетие Готика выше и выше, чем другие.
Проблема заключается в том, что DOM будет не позволяет указать, какой конкретный шрифт пользователь имеет из перечисленных вами альтернатив, а CSS не позволяет использовать отдельные шрифты (или корректировки) для каждого шрифта.
Однако JQuery может проверить размер контейнера с текстом. Итак, если вы предоставляете скрытый элемент на своей странице с известной буквой в нем, вы можете проверить ширину этого элемента в браузере пользователя.
Поскольку ширина этой буквы будет определяться шрифтом, который пользователь установил, вы можете сравнить эту ширину с шириной того же текста в предпочитаемом вами шрифте на своем собственном компьютере и вычислить размер шрифта для пользователя, который примерно соответствует тому, что вы намеревались.
Пример кода:
<style>
p { font-size: 15pt;
font-family:"Tw Cen MT","Gill Sans","Century Gothic",sans-serif;
}
p#testwidth {
/* Ensure test is invisible and isn't messed up with borders, etc. */
margin:0; padding:0; border:none; color:white; display:inline;
}
</style>
<p>Your text goes here.</p>
<p id="testwidth">m</p>
<script language="Javascript">
window.onload = function() {
// Same as your default CSS for font-size (just the number, not the units)
var desiredFontSize = 15;
// Experiment by testing width when Tw Cen MT *is* available. In pixels.
var expectedWidth = 17;
// width found will depend which font is available
var testedWidth = $('#testwidth').width();
// ratio, rounded to one decimal point
var normalizedFontSize = Math.round(
expectedWidth/testedWidth * desiredFontSize * 10)/10;
// change the stylesheet to "fix" the font size (in your preferred units)
$('p').css('font-size', normalizedFontSize + 'pt');
}
Четыре предостережений:
- Это не обязательно будет преодолеть каждый разницу в размерах между двумя альтернативными шрифтами. Вертикальное выравнивание и т. Д. Может быть не идеальным, если у них нет предпочтительного шрифта.
- Это может раздражать пользователей, у которых в браузере установлен уровень масштабирования по умолчанию, так как это существенно увеличит размер шрифта при загрузке страницы. К счастью, они могут увеличивать или уменьшать масштаб по желанию и переопределять размер принудительного шрифта.
- Кажется, что у меня проблема с размером шрифта со многими числами после десятичной точки, поэтому я закруглен. Должно быть достаточно близко.
- Я использовал ширину одной буквы «м». Если вы хотите получить более точный результат, вы можете использовать более длинную строку букв при условии, что не обертывается в браузере пользователя (что нарушит тест ширины). Несколько верхних и строчных букв и пробел должны быть хорошим тестом.
Не в стандартной CSS это не так. –
вы можете попробовать использовать процентные размеры, а не px? Я не уверен, что он исправит вашу проблему с размерами кросс-шрифтов, но, по крайней мере, предоставит всем браузерам возможность изменять размер текста (некоторые полу-старые браузеры будут оценивать размер пикселей до смерти и не позволять пользователю изменять размер текста). –
Вы можете использовать javascript или не использовать этот шрифт. –