Метка: шрифт

Любой шрифт какой только пожелает душа

Заметки # # # on Любой шрифт какой только пожелает душа

Существует такой опенсорс проект http://typeface.neocracy.org/ – официальный сайт. Суть его заключается в том, что подключив яваскрипт typeface.js вы сможете использовать нужный вам шрифт.

Как работает
Этот скрипт основывается на функциях отрисовки векторной графики встроенных в браузер. Библиотека состоит из двух компонентов: perl модул для конвертирования truetype шрифтов в векторные координаты и javascript-файла, который рендерит текст в браузере используя векторное описание шрифтов.

Плюсы

– Самое главное — отсутствие Flash. Всё работает на встроенных возможностях браузеров (при чем даже не самых последних версиях).
– Быстрая и простая установка. Не нужно разбираться в тонкостях более «навороченных» sIFR и FLIR.
– Текст видим как «текст», его можно выбрать, скопировать и т.д. Поисковики обрабатывают всё именно как текст. Правда, выбрать текст можно только в браузерах, поддерживающих canvas
– Поддержка всех свойств текста в CSS2. (font-size, letter-spacing, font-stretch, font-weight, line-height и т.д)


Минусы: библиотека + шрифт = жирновато.

em vs. px vs. pt vs. percent

Заметки # # # # # # on em vs. px vs. pt vs. percent

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.


2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.


3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т. д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.


4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании \”%\”, ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).


Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.

em vs. px vs. pt vs. percent

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и \”%\”. Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем \”%\”, а при установке «Largest» наоборот «em» отображается гораздо большим, чем \”%\”. И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в \”%\” позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в \”%\” изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн. Победитель: процент (%).

Стянуто с хабрахабр

Лично я при верстке предпочитаю px и percent.