Третий шрифт в семействе шрифтов значительно больше

Question

Для своего веб-сайта я выбрал несколько довольно неясных шрифтов в своей семье шрифтов. Самый известный шрифт (третий в семействе) - это Century Gothic, который есть у большинства компьютеров.

font-family:Tw Cen MT,Gill Sans,Century Gothic,sans-serif;

Проблема в том, что шрифт 12px в вековой готике намного больше, чем шрифт 12px в Tw Cen MT & Gill Sans. Если компьютер возвращается к Century Gothic, шрифты будут беспорядочными. Мне НУЖНО решение Jquery, в котором говорится, что столетняя готика будет иметь размер шрифта 75% от нормального значения. Мне не нужно это для обнаружения шрифтов. Мне просто нужно сказать, что если используется век Готчи, сделайте размер шрифта 75% от нормального значения. Какие-либо решения?

Answer 1

Я думаю, что проблема заключается в относительно высокой высоте X Century Gothic. Попробуйте использовать ex единицы в вашем font-size декларация. ex единицы основаны на высоте, в отличие от em, px, а также pt,

Настройка line-height размер пикселя также поможет нормализовать высоту, но вызовет проблемы у пользователей, которые изменяют уровень масштабирования текста в своем браузере.

Изменить: я вернулся и проверил, и бывшие юниты не помогают. Century Gothic выше и шире остальных.

Проблема в том, что 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');
      }

Четыре предостережения:

• Это не обязательно преодолеет все различия в размере между двумя альтернативными шрифтами. Вертикальное выравнивание и т. Д. Может быть не идеальным, если у них нет предпочитаемого шрифта.
• Это может раздражать пользователей, для которых в браузере установлен уровень масштабирования текста по умолчанию, так как при загрузке страницы это существенно увеличит размер шрифта. К счастью, они по-прежнему могут увеличивать или уменьшать масштаб по желанию и переопределять размер принудительного шрифта.
• Кажется, я вспоминаю, что у IE была проблема с размерами шрифтов со многими числами после десятичной точки, поэтому я округлил. Должно быть достаточно близко.
• Я использовал ширину одной буквы "м". Если вы хотите получить более точный результат, вы можете использовать более длинную строку букв, если она не переносится в браузере пользователя (что может нарушить проверку ширины). Несколько заглавных и строчных букв и пробел должны быть хорошим тестом.

Answer 2

Если вы соберетесь в вертикальный ритм, это не должно вызывать особых проблем.

http://24ways.org/2006/compose-to-a-vertical-rhythm

Это полностью излишне, но вы можете использовать http://www.lalit.org/lab/javascript-css-font-detect и создать условное выражение.

Я действительно предлагаю использовать что-то вроде первого метода (вертикальный ритм), чтобы сделать всю проблему неактуальной, если это вообще возможно. Вы будете спать намного лучше ночью.

Answer 3

На lalit.org есть скрипт, который угадывает, какие шрифты доступны на компьютере пользователя.

Вы можете использовать это, чтобы увидеть, используется ли Century Gothic, и, если да, загрузить дополнительную таблицу стилей, которая изменяет размер шрифта.

• http://www.lalit.org/lab/javascript-css-font-detect