CSS - как мне справиться с разницей в размерах шрифтов с засечками и без засечек?

Question

Я работаю над WordPress, который позволит администратору сайта переключаться между шрифтами sans-serif и serif.

Я пытаюсь закодировать таблицу стилей таким образом, чтобы размеры шрифтов были одинаковыми независимо от того, выбирают они Грузия или Arial.

Проблема в том, что когда он выглядит хорошо со шрифтом с засечками, он выглядит СЛИШКОМ большим, когда он без засечек. Когда я настраиваю его так, чтобы он хорошо выглядел шрифтом без засечек, он выглядит слишком маленьким в засечках.

Существует ли идеальный размер шрифта и высота строки, которые хорошо работают как с засечками, так и без засечек?

Или мне нужно сделать отдельные таблицы стилей (версия с крепостным креплением и версия без засечек)?

P.S. Я установил базовый размер шрифта для тела в 12 пикселей, а затем установил остальные размеры шрифта в процентах от базового. Конечно, этот базовый размер шрифта может быть установлен в ems или в процентах, потому что проценты все равно будут пропорционально масштабироваться.

Answer 1

Проблема, с которой вы сталкиваетесь, связана с различной относительной высотой x разных шрифтов, которая просто повторяет вашу первоначальную проблему в техническом плане: Georgia @ 12px не равна Arial @ 12px.Это связано со значением аспекта шрифтов.

Существует свойство css3 "font-size-Adjust", которое теоретически будет выравнивать высоту x всех шрифтов до указанного вами, но яне уверен, что это широко поддерживается или поддерживается вообще.Вы можете прочитать об этом @ http://www.fonttester.com/help/css_property/font-size-adjust.html

Вы можете проверить эту страницу, которая имеет решение javascript:

http://www.brunildo.org/test/xheight.pl

И, наконец, документация w3 дляВаша проблема:

http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

надеюсь, что это поможет.

Answer 2

Ну, во-первых, я бы использовал em, если у вас нет веских причин использовать%. Также при базовом размере шрифта 12px я хотел бы установить высоту строки в 1,25 или 1,5 em (15 или 18 px). Затем вам нужно найти шрифт с засечками, который приблизительно соответствует интервалу без засечек ... или наоборот. Если вы исследуете «наборы шрифтов», вы можете найти полезную информацию о том, какие шрифты лучше использовать вместе.

Answer 3

Спасибо за оба ваших ответа. Очень полезная информация здесь. Я узнал кое-что о стеках шрифтов и их относительных размерах, чего раньше не знал. Я собираюсь предложить пользователям возможность изменять размеры шрифтов и «подправлять» их в соответствии со своими предпочтениями.