@ Fontface: выражая его шрифт на ваш выбор, используя WebFonts
CSS завершены 10 лет существования в этом году! Те, кто были вокруг в течение некоторого времени, зарабатывая себе на хлеб (или нет) с помощью CSS, то вы, возможно, знают, как мы голодали за хороший выбор шрифтов. Даже при отсутствии шрифтов дизайнеров, таких как те, в CSS Zen Garden сделали использование изображений CSS фон для замены шрифтов в стремлении делать некоторые правосудие в свои проекты. Мы также попытались Flash / JavaScript ® хаки для достижения наших целей дизайн. Ни в коем случае это неправильный путь, чтобы получить шрифтов мы хотим в нашем веб-дизайна, но, безусловно, это не самый желательный способ. и на веб-дизайнером года, как я, полностью полагался на десять или около того шрифты для своих проектов.
Новейшие разработки в области веб-стандарты и форматы шрифтов позволяют сделать текст в HTML-шрифтов, кроме тех же старых шрифтов по умолчанию. Приходит в "@ fontface" decleration CSS.
@ Fontface provids решение ссылку на сам файл шрифта и извлечь его из Интернета. Использование @ fontface, разработчики могут использовать шрифты без замораживания текст в качестве фонового изображения. Реализация очень прямо вперед, как показано ниже, но, как и все хорошие вещи имеют CON части к нему, не все браузеры поддерживают один "тип шрифта". Если вы планируете использовать @ fontface на сайте с требованием поддержку кросс-браузер, то вы должны будете предоставить источников различных типов шрифтов того же самого.
- TrueType - формат, разработанный, чтобы хорошо выглядеть на экране. Рекомендуемые особенно для Windows, браузеров (Chrome).
- OpenType (ФФС) - это формат лучше для печати работы и не всегда хорошо выглядеть на Windows.
- СРВ - Вы нуждаетесь в этом формате, если вы хотите настроить таргетинг Internet Explorer. IE не будет использовать любой другой формат. Наши СРВ было бы считать "Lite", поскольку они не являются ни сжатые ни доменов ограничено.
- SVG - это XML-формат, поддерживаемый некоторыми браузерами, включая iPhone.
- WOFF - это кросс-браузерная, веб-шрифтов формата только легкий (шрифт данные почтовый сжатый) и может быть собран как с TrueType или PostScript (CFF) описывает. В настоящее время поддерживаются FireFox 3.6 +.
Использование @ fontface
@ Шрифт лицу { семейство шрифтов: "CalligraphyFLFRegular; SRC: URL ('CalligraphyFLF.eot'); SRC: местные («CalligraphyFLF), местные (« CalligraphyFLF), гиперссылка ('CalligraphyFLF.woff) формата ("WOFF), гиперссылка (' CalligraphyFLF.ttf) формата (" TrueType "), URL-адрес (" CalligraphyFLF . SVG # CalligraphyFLF) формата ("SVG"); } @ Шрифт лицу { семейство шрифтов: "Ваш шрифт"; SRC: URL ("Шрифты / font_filename.eot"); SRC: местные («Альтернативные названия"), местные ("Alternatename"), URL ("Шрифты / font_filename.woff») формата ("WOFF"), URL ("Шрифты / font_filename.otf») формата ("OpenType"), URL ("Шрифты / font_filename.svg # font_filename») формата ("SVG"); } h2 {семейство шрифтов: "Ваш шрифт", Грузия, засечек;}
Как вы можете видеть из приведенного выше примера, чтобы включить выбранный шрифт шрифтом, нужно связать с набором fonttypes по тем же шрифтом. Поэтому люди относятся к нему как "Font Kit".
Есть наборы шрифтов доступны, что позволяет явно связь с CSS @ шрифт лицу имущество под лицензионное соглашение конечного пользователя (EULA).
Полезные ресурсы WebFont:
- Шрифты для @ шрифт лицу вложение вики-страниц в http://webfonts.info/wiki/index.php?title=Main_Page
- Ray Larabie . Он является известным дизайнером шрифтов, который сделал сотни интересных TrueType шрифты в свободном доступе для использования в Интернете. Его шрифты элегантный, декоративные, и игривая.
- Дитер Steffmann еще один замечательный дизайнер шрифта. Он тоже сделал много красивых шрифтов, доступных для любого использования.
- Шрифт магазин : предлагает шрифты, разработанные специально для использования сети. Более 30 самых успешных семей FontFont теперь доступны в виде веб-FontFonts. FontShop также имеет подробную инструкцию WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
- Шрифт Белка : Витрины всех шрифтов, Font Squirrel предлагает для использования с @ шрифт лицу вложение CSS. Font Squirrel предлагает впечатляющий количество типов, делает его мертвым просто выбрать один из, так и обычным пользователям предлагается "наборы" - шрифт по вашему выбору, в нескольких форматах, в комплекте с демо HTML и CSS, который использует очень текущий @ шрифт лицу синтаксис . Они также предлагают способ сделать свой собственный @ шрифт лицу комплектов . Если шрифт вы хотите использовать была лицензирована (как правило те, которые приходят с вашего компьютера, не обязательно хорошо), генератор производит СРВ, SVG, и эй! WOFF файлы.
