Хорошо. Я собираюсь объяснить, как вы это делаете, но сначала вам нужно знать несколько вещей.
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 почти точно равно 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. Например, приведенное ниже приведёт к эффективному размеру шрифта 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 для шрифтов, установленных в вашей системе .)
Но подождите! Там хуже!
TheВышеуказанная техника работает только в Firefox. Еще проще переопределить минимальный размер шрифта для элемента в Webkit, включая Safari, iOS Safari и Chrome - просто используйте нестандартное свойство -webkit-text-size-adjust:
-webkit-text-size-adjust: none;
Это еще один баг , кстати. text-size-adjust - это нестандартное предложение, предназначенное для ограничения степени, в которой размер текста автоматически раздувается на мобильных устройствах. Он не предназначен для работы на настольных компьютерах, тем более предотвращает изменение размера текста вручную.
Последнее слово: это не будет длиться вечно
Ошибки исправляются со временем. Вы не должны иметь возможность переопределять размер шрифта браузера по умолчанию, независимо от того, насколько этого хотят ваш безответственный дизайнер и PM. Рано или поздно люди поймут, что эти свойства используются для того, чтобы сделать сеть хуже для всех, кто-то выпустит патч, и веселье закончится.
Тем не менее, если вас принуждают к этому, я искренне защищаю решение, которое в конечном итоге заставит вовлеченные стороны переосмыслить свое решение.
¹ Подсказка: если ваш текст содержит какую-либо информацию, которая предназначена для чтения кем-либо когда-либо, то вам не следует возиться с настройками доступности браузера. Законные случаи включают чисто декоративные эффекты (сложное искусство ASCII, поэзия формы) и предварительный просмотр документов.
² Вернее, расстояние от базовой линии до средней высоты, которая является высотой буквы x в большинстве шрифтов.