Как сделать так, чтобы шрифты отображались на веб-кроссплатформенной платформе? - PullRequest
Новая
       17

Как сделать так, чтобы шрифты отображались на веб-кроссплатформенной платформе?

1 голос
/ 12 декабря 2011

Я использую настройку размера шрифта в пикселях в своем CSS-коде. например: 

.items {
    font-family: Verdana, Arial;
    font-size: 14px;
    width: 100px;
}

У меня проблема. Например, есть слова Hello words, написанные в элементе класса .items. Элемент умещается в 100px и отображается нормально (в Ubuntu Linux). Но в браузерах Windows шрифты шире, а текст не умещается в 100px, поэтому появляются 2 строки текста (я этого не хочу)

Как защитить свой сайт от таких проблем? Как быть уверенным, что каждый текст в элементах соответствует своему контейнеру?

Ответы [ 2 ]

2 голосов
/ 12 декабря 2011

Установлена ​​ли в системе Ubuntu Verdana?По моему опыту, Verdana обычно более широкий шрифт, чем Arial, поэтому может быть, что система Linux отображает Arial, а Windows отображает Verdana?

Если вы хотите убедиться, что обе системы отображают один и тот же шрифт,вам нужно будет использовать CSS @ font-face , который теперь очень хорошо поддерживается, особенно если вы используете что-то вроде 'пуленепробиваемого синтаксиса' : 

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

1 голос
/ 12 декабря 2011

Вы можете попытаться защитить от таких проблем, установив достаточно большую ширину. Но нет никакого способа гарантировать, что некоторая ширина всегда достаточна, и если ширина достаточна в большинстве случаев, то она слишком велика во многих случаях.

Ширина текста зависит от многих факторов, а не только от размера шрифта (который не имеет простого отношения к ширине) - характеристик шрифта (ширина символов вперед), фактического текста (скажем, многие буквы m и многие я), и в принципе межбуквенное и межсловное расстояние тоже. Это не зависит от операционной системы, хотя разные системы могут иметь разные общие шрифты. Это косвенно зависит от языка, поскольку разные языки используют разные системы письма, в результате чего ширина букв может сильно различаться.

Использование em вместо px имеет несколько преимуществ, но это не помогает в этом вопросе. Единица em - это высота шрифта, и ее нельзя использовать для оценки ширины символов.

Так что тебе просто нужно с этим жить. Например, если вы хотите настроить вертикальную панель навигации, в которой ссылки (представленные в виде кнопок или иным образом с видимой шириной), таблица с одним столбцом является практическим решением, поскольку она приводит к представлению, где все ячейки имеют одинаковую ширину, определенную ячейкой с наибольшими требованиями к ширине.

...