третий шрифт в семействе шрифтов значительно больше - PullRequest
Новая
       20

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

3 голосов
/ 22 января 2010

Для моего веб-сайта Я решил использовать несколько довольно неясных шрифтов в своем семействе шрифтов. Самый известный шрифт (третий в семействе) - это 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% от нормального значения. Какие-нибудь решения?

Ответы [ 3 ]

1 голос
/ 22 января 2010

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

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

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

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

0 голосов
/ 24 января 2010

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

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

0 голосов
/ 22 января 2010

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

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

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

Проблема в том, что DOM не позволит вам определить, какой конкретный шрифт у пользователя из перечисленных альтернатив, а CSS не позволяет использовать отдельные размеры (или корректировки) шрифта для каждого шрифта. 1018 *

Однако 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 была проблема с размерами шрифта со многими числами после десятичной точки, поэтому я округлил. Должно быть достаточно близко.
  • Я использовал ширину одной буквы "м". Если вы хотите получить более точный результат, вы можете использовать более длинную строку букв при условии , которая не переносится в браузере пользователя (что может нарушить проверку ширины). Несколько заглавных и строчных букв и пробел должны быть хорошим тестом.
...