Встройте шрифт Ubuntu в любую веб-страницу
Рассмотрение лицензий как:
как я могу использовать семейство шрифтов Ubuntu на каком-либо веб-сайте, не делая пользователя для установки его?
Любой шанс использования его с инструментами как: http://code.google.com/intl/en-US/apis/webfonts/
3 ответа
Существует 2 метода, с которыми можно встроить шрифт Ubuntu в веб-сайт - использование (предпочтенного) Google Font Directory или использование @font-face Объявление CSS и преобразование Ваших шрифтов вручную.
Использование Google Webfonts
Можно теперь использовать шрифт Ubuntu в качестве веб-шрифта Google. Это сделает процесс намного более простым. Большая часть содержания этой части ответа прибывает из ответа sladen.
Почему использование является Google Font API предпочтительный метод?
Используя Google Font API превосходное предложение, поскольку он позволяет webfonts автоматически работать над всеми современными браузерами, не имея необходимость волноваться о деталях. Используя шрифт API означает, что посетители будут всегда видеть последнюю версию гарнитуры автоматически.
Как я могу использовать Google Font API?
С 21 декабря 2010 Семейство шрифтов Ubuntu теперь включено и развертываемо от Google Font API, посещения:
Можно считать регистрацию Google Web Font о новостях, и затем:
- Откройте Google Font Directory: страница "Ubuntu - Use this font"
Отметьте комбинацию весов и стилей из Регулярного, Курсивного, Полужирного и Полужирного курсива, в котором Вы нуждаетесь для своей веб-страницы.
Если значение по умолчанию является неправильным, выберите комбинацию языка/сценария, в которой Вы нуждаетесь: российский веб-сайт с английскими примерами мог бы использовать "кириллицу, латынь".
Добавьте данный
<link>тег между<head> ... </head>в Вашей странице HTML или шаблонах и добавляют соответствующий промежуточный код CSS<style> ... </style>теги в Вашем<head>.Например, при создании российского/Английского гибридного веб-сайта и требуемые для использования шрифта в качестве значения по умолчанию для всего текста, Вы могли добавить следующий код между Вашим
<head>теги:<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' /> <style type="text/css" > body { font-family : 'Ubuntu', sans-serif; } </style>
Примечания:
"Латынь" является сценарием, в котором записаны английский и много других европейских и африканских языков.
"Подмножество" оптимизирует файлы шрифтов, только отправляя символы за определенными языками, шрифты составляют приблизительно 44 КБ eachs. Число на 168 КБ, показанное в данный момент, для всех 1,200 + глифы как единственная веб-загрузка шрифта — и большинство не нужно для единственного веб-сайта.
Файлы шрифтов Ubuntu автоматически преобразовываются в правильном формате для различных браузеров; в зависимости от делания и версии требуемый формат WOFF, EOT, SVG или TTF. Правильная комбинация CSS характерна для каждого запроса страницы и волшебно решает эту тяжелую проблему.
Используя @font-face
Можно встроить шрифты Ubuntu путем преобразования их в шрифты WOFF. Можно затем встроить их использующий CSS @font-face объявление. Шрифты (.ttf файлы) могут быть найдены в /usr/share/fonts/truetype/ubuntu-font-family.
Например, для использования Ubuntu Регулярный шрифт, преобразованный в файл WOFF, Ubuntu-R.woff, используют этот код CSS:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
Так же для полужирной Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Курсив Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Полужирный курсив Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Это поддерживается всеми недавними браузерами.
Соображения
Помните, что некоторые пользователи настраивают свои браузеры для использования определенного набора шрифтов и могут раздражаться, если пользовательские шрифты используются. Кроме того, считайте Лицензию на шрифты Ubuntu для точных условий относительно того, как шрифт может быть распределен.
Используя Google Font API превосходное предложение, поскольку он позволяет webfonts автоматически работать над всеми современными браузерами, не имея необходимость волноваться о деталях. Используя шрифт API означает, что посетители будут всегда видеть последнюю версию гарнитуры автоматически.
С 21 декабря 2010 Семейство шрифтов Ubuntu теперь включено и развертываемо от Google Font API, посещения:
Можно считать регистрацию Google Web Font о новостях, и затем:
- Откройте Google Font Directory: страница "Ubuntu - Use this font"
- Отметьте комбинацию весов и стилей из Регулярного, Курсивного, Полужирного и Полужирного курсива, в котором Вы нуждаетесь для своей веб-страницы.
- Если значение по умолчанию является неправильным, выберите комбинацию языка/сценария, в которой Вы нуждаетесь: российский веб-сайт с английскими примерами мог бы использовать "кириллицу, латынь".
- Скопируйте и вставьте две строки CSS в
<head> ... </head>и<style>...</style>разделы Вашей страницы HTML или шаблонов.
Примечания:
"Латынь" является сценарием, в котором записаны английский и много других европейских и африканских языков.
"Подмножество" оптимизирует файлы шрифтов, только отправляя символы за определенными языками, шрифты составляют приблизительно 44 КБ каждый. Число на 168 КБ, показанное в данный момент, для всех 1,200 + глифы как единственная веб-загрузка шрифта — и большинство не нужно для единственного веб-сайта.
Файлы шрифтов Ubuntu автоматически преобразовываются в правильном формате для различных браузеров; в зависимости от делания и версии требуемый формат WOFF, EOT, SVG или TTF. Правильная комбинация CSS характерна для каждого запроса страницы и волшебно решает эту тяжелую проблему.
Рендеринг шрифта серверной стороны (возможно, лучше "динамического рендеринга шрифта") был интересной проблемой в течение довольно долгого времени.
Технически, кажется логичным, что для машины для отображения определенного шрифта это должно уже быть установлено локально.
С другой стороны, веб-дизайн проигрывает много при необходимости придерживаться основных/известных 'веб-шрифтов'.
CSS2.1 сделали некоторые улучшения при помощи @font-face объявления правила.
Это еще не стало стандартом, но это будет в конечном счете с CSS3.
Помимо этого, было несколько альтернативных методов, как:
Я надеюсь, что предоставленные ссылки дадут Вам лучшее представление о том, что может быть сделано ;-)