Блог

Я использую большой шрифт Arial — 40 пикселей, выделенный жирным шрифтом Arial.

Я заметил, что он не отображается точно в браузерах Chrome/Firefox в Windows. Это близко, но немного по-другому. Увеличение размера шрифта до 46 пикселей делает ситуацию лучше.

Я предполагаю, что это рендеринг на уровне пикселей, так каковы «правильные» размеры пикселей для шрифта Arial ?

Определите «точно передано»? вы имеете в виду, что он отображается по-другому в других приложениях? Но если да, то какой из них действительно точен?

Если вам действительно повезет, вы можете заставить все браузеры на данной платформе отображать практически одно и то же, что вам, похоже, удалось при разрешении 46 пикселей, но это, конечно, не данность, как вы обнаружили при 40 пикселей.

Но даже если вам удастся попасть в нужное место во всех браузерах Windows, вы получите совершенно другой эффект, если загрузите одну и ту же страницу в любой браузер на ПК с Mac или Linux, не говоря уже о том, как она будет выглядеть на телефоне или планшетном компьютере.

Вы спросили, имеет ли это значение на уровне пикселей. Шрифты фактически отображаются на субпиксельной основе (см. http://en.wikipedia.org/wiki/Subpixel_rendering для получения дополнительной информации об этом), что означает, что вы должны получить очень высокую точность. Однако существует ряд различных подходов к визуализации шрифтов, которые могут привести к значительным различиям между приложениями и платформами.

Большинство приложений Windows отложат отрисовку шрифтов до API Windows. Однако такое приложение, как веб-браузер, нуждается в гораздо большем контроле над отображением шрифтов, чем может дать API операционной системы, поэтому им приходится реализовывать свои собственные. Это, очевидно, означает, что могут существовать различия между отображением шрифтов браузера и другими приложениями.

Это особенно верно, поскольку у Microsoft есть ряд патентов в области отрисовки шрифтов, что означает, что существуют определенные методы, которые Firefox и Chrome не смогли бы использовать при их отрисовке (без уплаты роялти). Apple также имеет патенты в этой области. Этих методов легко избежать, но это опять же означает, что рендеринг шрифтов Firefox немного отличается от рендеринга шрифтов Windows. Не ошибся, просто по-другому.

Наконец, это также сводится к вопросу выбора. Если вы сравните Apple Mac с ПК с Windows, легко заметить, что на компьютерах Mac отрисовка шрифтов сильно отличается от ПК. Текст на Mac имеет тенденцию выглядеть более размытым, но более плавным, в то время как текст на ПК более четкий, но может иметь более неровные края. Эти различия обусловлены выбором, сделанным разработчиками ОС на уровне субпиксельного рендеринга. Они выглядят по-разному, но оба они являются обоснованным выбором, и их можно энергично защищать. Firefox также сделал свой собственный выбор в этом отношении.

В чем суть? Пожалуйста, даже не пытайтесь настаивать на идеальной визуализации шрифтов в пикселях в веб-браузере.