2009-02-06 9 views
18

При создании веб-страниц мы можем добиться согласованного размера шрифта в браузерах. Я использовал что-то вроде "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" в своем CSS, но текст выглядит по-разному в Firefox, IE, Google Chrome и Safari (и это даже не на разных платформах). В основном на той же машине, которая работает под управлением Windows Vista, я получаю отличный внешний вид в разных браузерах.Согласованный размер шрифта в браузере (веб-разработка)

Как это можно зафиксировать так, чтобы размер текста отображался одинаково во всех браузерах.

+0

Дубликат см: [http://stackoverflow.com/questions/ 484502/как к рендер-текст-в-сети-в-же размера, как-браузеры-ли данное-CSS-для-тэ] (http://stackoverflow.com/questions/484502/how-to-render-text-in-net-in-the-same-size-as-browsers-do-given-css-for-the-te) или [http://stackoverflow.com/questions/132685 /font-size-in-css-or-em](http://stackoverflow.com/questions/132685/font-size-in-css-or-em) –

ответ

7

Используйте вместо пикселей (точек) пиксели (пиксели) для единиц размера шрифта. Тогда вы будете иметь дело с размерами пикселей.

Опасайтесь, однако, в зависимости от того, как ваш сайт используется. Были иски (в США) по вопросам доступности на веб-сайтах, которые являются результатом «жесткого кодирования» размера шрифта.

+3

em следует использовать вместо px – aehlke

+2

Я думаю, что эти иски должны быть вызваны из-за смехотворно небольших размеров шрифта для отказов от ответственности, это единственный способ, которым это могло случиться (даже в такой стране, как США ...). –

+0

Особенно, если использовать пользовательские шрифты, добавленные через @ font-face, это тоже не решение. – loeffel

15

Вы захотите использовать Сброс CSS, чтобы попытаться добиться согласованного поведения во всех браузерах.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

+0

Согласовано.Я использовал reset.css в течение последних двух лет для нормализации. – Syntax

+0

+1 к этому. База Yahoo, шрифт и сброс всех вместе - отличный способ начать сайт. Я нахожу, что мой CSS делает то, что я намеревался. –

+0

+1 Это также очень приятно, как вы точно знаете, сколько em, и вы можете даже вычислить из ems в пикселях с помощью простой формулы; но ваш сайт по-прежнему будет доступен для людей, которые переопределяют размер шрифта – JasonSmith

1

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

Обычно гораздо проще и умнее иметь достаточно гибкие конструкции, чтобы небольшие различия между браузерами не играли слишком большой роли.

7

При создании веб-страниц, как мы достигаем последовательный размер шрифта во всех браузерах

Для основного текста тела, вы не знаете. Некоторым людям нужен больший текст, чтобы они могли читать его легче; встать на свой страх и риск. Используйте относительные размеры шрифта в таких единицах, как «em» или «%».

Для небольшого количества презентационного текста, где требуется размер текста, чтобы соответствовать элементам на экране размером с пиксель, используйте блок «px». Не используйте 'pt' - это имеет смысл только для печати, оно будет изменяться более или менее случайным образом при просмотре на экране.

Вы все равно никогда не получите текст точно такого же размера, потому что шрифты различаются по платформам - и Lucida Grande и Helvetica выглядят совсем по-другому.

+1

+1 комментарий пользователя bobince. «встать на свой страх и риск». Peril может варьироваться от разгневанных пользователей до пользователей: http://www.petefreitag.com/item/582.cfm –

3

С помощью этих двух параметров, вы можете достичь точно такой же внешний вид шрифта:

font-size: 70%; // better than px 

line-height: 110%; // required to make line heights the same 

Испытано: IE9, Firefox, Google Chrome