Как я могу переопределить минимальный размер шрифта в Firefox?
Мой сайт отображается так же, как и в IE и Opera, но в Firefox я не могу (с помощью CSS) получить размер шрифта меньше, чем у Firefox по умолчанию минимальный размер шрифта. Конечно, я могу перейти в Инструменты> Параметры и удалить это значение, но другие пользователи увидят, что некоторые элементы смещены.
Я пытался использовать! Важно, но это не работает. И я не могу заменить текст изображениями, это динамические поля.
8 ответов
Хорошо. Я собираюсь объяснить, как вы это делаете, но сначала вам нужно знать несколько вещей.
1. Вы не должны делать это.
Существует и очень хорошая причина, по которой существует минимальный размер шрифта. Проще говоря, с большинством шрифтов уже трудно читать что-либо ниже 12px, не говоря уже о минимальном значении по умолчанию 9px. Если ваш дизайн требует таких размеров шрифта для чего угодно, кроме крайне ограниченного набора обстоятельств¹, то ваш дизайн просто плохой и исключает огромную категорию пользователей.
2. Вы действительно не должны этого делать.
Сеть является гибкой средой, и хороший дизайн должен учитывать это. Проекты, для работы которых требуется фиксированный размер шрифта, подходят для печати, но не подходят для Интернета. Любой дизайнер, который не может работать с этим требованием, не понимает среду, и ни один достойный руководитель не должен расставлять приоритеты плохих решений дизайнера над практичностью и удобством использования. У вас есть гораздо большие, более фундаментальные проблемы для решения, если вы не можете возразить против этого решения.
3. Вы действительно, действительно не должны этого делать.
В зависимости от вашей юрисдикции вы можете бродить по серой зоне. Крошечные размеры шрифтов трудно читать, и пользователям будет очень легко пропускать информацию, что особенно проблематично, если имеющийся текст юридически значим, например, информация об отказе или отказ от ответственности. Вы также наступаете на тонкий лед в отношении доступности вашего сайта, создавая серьезные проблемы для людей с нарушениями зрения.
Как это сделать в любом случае
Firefox довольно просто сделать так, чтобы шрифты отображались меньше указанного минимального размера: просто используйте font-size-adjust собственность
Здесь приходит немного науки
Каждый шрифт имеет нечто, называемое аспектным значением, которое представляет собой соотношение между его высотой x (высотой буквы x)² и фактическим установленным вами размером шрифта. Например, в Comic Sans это действительно большое значение (0,55), как можно судить по тому, насколько большие более короткие буквы (a, c, e…) сравниваются с более высокими буквами (b, d, h…), тогда как в Courier Новый это намного меньше (0,43).
Эта изменчивость может вызвать некоторые проблемы. Например, допустим, вы задали супер-необычный шрифт для своего основного текста, но, поскольку вы хороший дизайнер, вы предоставляете несколько запасных шрифтов. Это здорово, но поскольку некоторые из этих запасных вариантов имеют разные значения сторон, буквы могут быть меньше и менее разборчивы в указанном вами размере. font-size-adjust позволяет вам убедиться, что любой запасной вариант имеет ту же высоту x, что и ваш необычный шрифт.
К сожалению, мы также можем использовать его, чтобы сделать текст менее разборчивым. Допустим, ваша основная копия - это Segoe UI в 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 */
}
Что произойдет, если мы установим его на что-то меньшее? Ну, браузер будет регулировать размер шрифта, чтобы использовать высоту х, равную font-size × font-size-adjust, Например, приведенное ниже приведёт к эффективному размеру шрифта 6 пикселей:
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 для шрифтов, установленных в вашей системе.)
Но ждать! Там хуже!
Вышеуказанная техника работает только в Firefox. Еще проще переопределить минимальный размер шрифта для элемента в Webkit, включая Safari, iOS Safari и Chrome, - просто используйте нестандартный -webkit-text-size-adjust имущество:
-webkit-text-size-adjust: none;
Это еще одна ошибка, кстати. text-size-adjust это нестандартное предложение, предназначенное для ограничения степени, в которой размер текста автоматически раздувается на мобильных устройствах. Он не предназначен для работы на настольных компьютерах, тем более предотвращает изменение размера текста вручную.
Последнее слово: это не будет длиться вечно
Ошибки исправляются в конце концов. Вы не должны иметь возможность переопределять размер шрифта браузера по умолчанию, независимо от того, насколько этого хотят ваш безответственный дизайнер и PM. Рано или поздно люди поймут, что эти свойства используются для того, чтобы сделать сеть хуже для всех, кто-то установит патч, и веселье закончится.
Тем не менее, если вас принуждают к этому, я искренне защищаю решение, которое в конечном итоге заставит вовлеченные стороны переосмыслить свое решение.
¹ Подсказка: если ваш текст содержит какую-либо информацию, которая предназначена для чтения кем-либо когда-либо, то вам не следует возиться с настройками доступности браузера. Законные случаи включают чисто декоративные эффекты (сложное искусство ASCII, поэзия формы) и предварительный просмотр документов.
² Вернее, расстояние от базовой линии до средней высоты, которая является высотой буквы x в большинстве шрифтов.
На всякий случай это может кому-нибудь помочь, в итоге я заменил небольшие текстовые области, изначально в 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.
Вы можете эффективно сжимать текст ниже минимального размера, используя CSS3 transform: scale(x) синтаксис, где x < 1, Это гарантированно будет работать в будущих браузерах (так как это точка масштабирования), но имеет свои собственные проблемы / предостережения.
Ты не можешь сделать это. Это настройка, предоставляемая Firefox, чтобы такие люди, как мы, не могли переопределить ее некоторыми настройками CSS.
Если вы установите размер шрифта CSS по умолчанию на своих веб-страницах в процентах... тогда с помощью изменения размера вы можете обеспечить межбраузерную масштабируемость... Настройка размера шрифта на 62,5% является основой для масштабирования шрифтов с базовыми размерами шрифта до 10 пикселей,
body {
font-size: 62.5%;
}
p {
font-size: 1em;
}
Так что, если вы действительно хотите, чтобы ваш стандартный текст абзаца показывал 10px... Вы бы просто указали его в CSS как 1em, и он будет отображаться как 10px. Обратите внимание, что если вы действительно хотите сделать это правильно... вам нужно также выполнить сброс CSS, так как вы хотите, чтобы ваш дисплей был согласованным...
Вы можете попробовать следующий код
тело {
min-font-size: 15px!important;
}
Если вы установите атрибут размера шрифта в теле, он должен установить его как размер шрифта по умолчанию.
body
{
font-size: 12px;
}