Мой сайт отображается точно так же, как и в IE и Opera, но в Firefox я не могу получить (через CSS) размер шрифта меньше, чем размер минимального размера шрифта Firefox. Конечно, я могу перейти в "Инструменты" > "Параметры" и удалить это значение, но другие пользователи увидят некоторые из перемещенных элементов.
Я пробовал использовать! важно, но он не работает. И я не могу заменить текст изображениями, это динамические поля.
Хорошо. Я объясню, как вы это делаете, но сначала вам нужно знать несколько вещей.
Есть причина, и очень хорошая, что существует минимальный размер шрифта. Просто, с большинством шрифтов, уже стоит прочитать что-либо ниже 12px, не говоря уже ниже минимального значения по умолчанию 9px. Если ваш дизайн требует таких размеров шрифта для чего угодно, кроме крайне ограниченного набора обстоятельств¹, то ваш дизайн просто плох и исключает огромную категорию пользователей.
Сеть - это внутренне гибкая среда, и хороший дизайн должен учитывать это. Конструкции, требующие фиксированного размера шрифта для работы, подходят для печати, но они не подходят для Интернета. Любой дизайнер, который не может работать с этим требованием, не понимает среду, и ни один достойный PM не должен уделять приоритетное внимание дизайнерским решениям относительно практичности и удобства использования. У вас гораздо больше фундаментальных проблем, с которыми можно справиться, если вы не можете возражать против этого решения.
В зависимости от вашей юрисдикции вы можете бродить по законной серой зоне. Крошечные размеры шрифтов трудно читать, и пользователям будет очень легко пропустить информацию, что особенно неприятно, если текст под рукой имеет юридическое значение, например, информация об отказе или отказ от ответственности. Вы также стучите по тонкому льду в отношении доступности вашего сайта, вызывая серьезные проблемы для людей с нарушениями зрения.
Довольно легко сделать шрифты Firefox с минимальным размером: просто свойство font-size-adjust.
У каждого шрифта есть что-то, называемое значением аспекта, которое представляет собой отношение между его высотой x (высота буквы x) ² и фактическим размером шрифта, который вы установили. Например, в Comic Sans это действительно большой (0.55), так как вы можете сказать, насколько большие короткие буквы (a, c, e...) сравниваются с более высокими буквами (b, d, h...), тогда как в Courier Новый он намного меньше (0,43).
Эта изменчивость может вызвать некоторые проблемы. Например, скажем, вы указываете супер-фантазийный шрифт для вашего основного текста, но поскольку вы хороший дизайнер, вы предоставляете несколько резервных шрифтов. Это здорово, но поскольку некоторые из этих резервных копий имеют разные значения параметров, буквы могут быть меньше и менее разборчивы по указанному вами размеру. font-size-adjust позволяет вам убедиться, что любой резерв имеет ту же высоту x, что и ваш супер-фантастический шрифт.
К сожалению, мы также можем использовать его, чтобы текст был менее разборчивым. Скажем, ваша копия тела - это пользовательский интерфейс Segoe в 12px:
body {
font-family: "Segoe UI";
font-size: 12px;
}
Значение параметра Segoe UI почти равно 0,5, поэтому, если вы укажете, что в качестве значения font-size-adjust размер шрифта не изменяется:
body {
font-family: "Segoe UI";
font-size: 12px;
font-size-adjust: 0.5; /* x-height = 12px × 0.5 = 6px */
}
Что произойдет, если мы установим его на что-то меньшее? Ну, браузер установит размер шрифта, чтобы использовать высоту x, равную font-size × font-size-adjust. Ниже, например, будет создан эффективный размер шрифта 6px:
body {
font-family: "Segoe UI";
font-size: 12px;
font-size-adjust: 0.25; /* x-height = 12px × 0.25 = 3px */
}
Это составляет основу нашей атаки. Оказывается, Firefox будет соблюдать font-size-adjust, даже если он переопределяет минимальный размер шрифта. (Само собой разумеется, что это ошибка.)
Попробуйте это в Firefox с минимальным набором шрифтов. Он использует две ошибки: вышеупомянутую проблему font-size-adjust и отдельную проблему с сообщением размера отображаемого шрифта с помощью getComputedStyle.
Вам нужно знать значение аспекта шрифта, который вы используете для этого, для вычисления правильного значения font-size-adjust, для которого этот список значений формата может помочь вам. (В качестве альтернативы попробуйте оценку x-height для шрифтов, установленных в вашей системе.
Этот метод работает только в Firefox. Еще проще переопределить минимальный размер шрифта на элементе Webkit, включая Safari, iOS Safari и Chrome, просто используйте нестандартное свойство -webkit-text-size-adjust:
-webkit-text-size-adjust: none;
Это, кстати, еще одна ошибка. text-size-adjust - это нестандартное предложение, предназначенное для ограничения того, в какой размер текста автоматически раздувается на мобильных устройствах. Он не предназначен для работы с настольными UA, а тем более для предотвращения изменения размера текста вручную.
Исправлены ошибки. Вы не должны переопределять размер шрифта браузера по умолчанию, независимо от того, насколько ваш безответственный дизайнер и PM хотят вас. Рано или поздно люди выяснят, что эти свойства эксплуатируются, чтобы сделать Интернет хуже для всех, кто-то приземлится патчем, и веселье закончится.
Тем не менее, если вас принуждают к этому, я искренне защищаю решение, которое в конечном итоге заставит вовлеченные стороны переосмыслить свое решение.
¹ Подсказка: если ваш текст передает любую информацию, предназначенную для чтения любому, когда-либо, то вам не следует возиться с настройками доступности браузера. К законным случаям относятся чисто декоративные эффекты (сложное искусство ASCII, стильная поэзия) и предварительный просмотр документов.
² Правильнее, расстояние от базовой линии до средней высоты, которая является высотой буквы x в большинстве шрифтов.
Вы не можете этого сделать. Это настройка, предоставляемая Firefox, чтобы люди, подобные нам, не могли переопределить ее с помощью некоторых настроек CSS.
Вы можете эффективно уменьшить текст ниже минимального размера, используя синтаксис CSS3 transform: scale(x), где x < 1. Это гарантированно работает в будущих браузерах (как точка масштабирования), но имеет свои собственные проблемы/оговорки.
На всякий случай, это может помочь кому угодно, я заменил небольшие текстовые области, первоначально в HTML, с зонами SVG. Я заполняю эти зоны библиотекой Raphaël JS с кодом типа
logo_text = $j("#logo_text").val();
logo_text_preview_paper.clear();
logo_text_preview_paper.text(0, 4, logo_text).attr({"font-family": 'Helvetica', "font-size": 7, "text-anchor": 'start'});
Я не использовал HTML-холст из-за отсутствия доступности в некоторых браузерах, а также потому, что SVG предлагает намного лучший пользовательский интерфейс на дисплеях Retina.
Это может показаться излишним, но я не смог найти более легкое решение проблемы с минимальным размером шрифта FF.
В некоторых случаях вы можете использовать <canvas> элемент и fillText().
Если вы задаете размер шрифта CSS по умолчанию на своих веб-страницах в процентах... затем с помощью em Size вы можете обеспечить масштабируемость в кросс-браузере... Настройка размера шрифта до 62,5% является основой для масштабирования шрифтов base hx размеры до 10 пикселей.
body {
font-size: 62.5%;
}
p {
font-size: 1em;
}
Итак, если вы действительно хотели, чтобы текст вашего стандартного абзаца сказал 10px... Вы просто указали бы его в своем CSS как 1em, и он будет отображаться как 10px. Обратите внимание, что если вы действительно хотите сделать это правильно... вам нужно сделать CSS reset, так как вы хотите, чтобы ваш дисплей был согласованным...
вы можете попробовать следующий код
body {
min-font-size: 15px!important;
}
Если вы установите атрибут размера шрифта в теле, он должен установить его как размер шрифта по умолчанию.
body
{
font-size: 12px;
}