Статьи
Делаем сайт лучше
Нестандартные шрифты для сайтов в разных браузерах / font-face
Оставлен Натали Пнд, 04/06/2012 - 16:30
Раздел:
При верстке часто возникает проблема из-за нестандартных шрифтов. Одним из впособов настроить нестандартные шрифты является font-face.
Но часто это не сильно помогает, потому что нестандартный шрифт подключается. но в разных браузерах он выглядит абсолютно по разному. что очень не нравится клиентам.
Существует так же второй способ - подбор шрифтов под разные браузеры, который иногда помогает больше, чем просто применение font-face.
Приведу один из таких ресурсов ниже:
- Войдите чтобы оставить комментарии
Комментарии
Протестировал, работает во всех браузерах. Достаточно сгенерировать архив - из архива взять файлы - положить в отдельный каталог.
Вот мой пример кода вызова шрифтовых файлов, может кому пригодиться:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 4, 2012 */
@font-face {
font-family: 'LucidaSansUnicodeRegular';
src: url('font/6207-webfont.eot');
src: url('font/6207-webfont.eot?#iefix') format('embedded-opentype'),
url('font/6207-webfont.woff') format('woff'),
url('font/6207-webfont.ttf') format('truetype'),
url('font/6207-webfont.svg#LucidaSansUnicodeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Пример использования:
body *{
font-family: 'LucidaSansUnicodeRegular', Arial, sans-serif;
}
Удачи всем )
Спасибо, Максим, очень полезная информация.
http://fontface.codeandmore.com/
генератор фонтов под веб
Полезная ссылка - http://www.xiper.net/collect/html-and-css-tricks/typographics/font-face-in-the-details.html
и еще одна для клиентов о том, нужен ли им нестандартный шрифт и понимают ли они, что он будет выглядеть по разному http://www.xiper.net/collect/weekdays-front-end-dev/for-owner-oline-business/custom-fonts.html
Когда нестандартные шрифты не подключаются - http://www.xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/opera/font-face-no-load-fonts.html
http://www.font2web.com/
Для тех, кто работает с Друпал, есть специальный модуль, похволяющий подключить все необходимые шрифты к сайту, применить их к разным элементам, и много чего другого. Модуль называется fontyourface.
http://www.freefontconverter.com - еще один генератор шрифтов, который к тому же еще и для маков формат выдает
есть вот такой шрифт helveticaneue-ultralight http://mixtr2-niko.dev.bighameleon.com/content/%D1%82%D1%83%D1%80%D1%8B-...
им написано "Туры в Доминикану"
фонт маковский, в оригинальном файле 14 вариантов начертаний и 2 десятка языков в итоге конверторы врут и цепляют любой вариант кроме нужного, автогенираторы вида залил ттф получил пакет вебфонта шрифт тупо не берут в конвертацию
в инете многие пишут - "аааа говношрифт не пользуйте его"
решается так
1. берем маковский фонт,
2. берем фонт едитор fontforge, конвертим с выбором нужной вариации и языка , получаем ттф
3. ищем в инете и рабочие конверторы для каждого из дополнительных нужных форматов форматов (woff eot svg), собираем пакет шрифтов для веба ручками
@font-face {
font-family: 'helveticaneuecyrultralight';
src: url("../fonts/helveticaneue-ultralight.eot");
src: url("../fonts/helveticaneue-ultralight.eot?#iefix") format("embedded-opentype"),
url("../fonts/helveticaneue-ultralight.ttf") format("truetype"),
url("../fonts/helveticaneue-ultralight.woff") format("woff"),
url("../fonts/helveticaneue-ultralight.svg#helveticaneuecyrultralight") format("svg");
font-style: normal;
font-weight: normal;
}
пользуем