Учитывая лицензии как:
как я могу использовать семейство шрифтов Ubuntu на любом сайте, не заставляя пользователя устанавливать его?
Любой шанс использовать его с такими инструментами, как: http://code.google.com/intl/en-US/apis/webfonts/
Вставить шрифт Ubuntu на любую веб-страницу
Ответы:
Есть 2 способа, с помощью которых вы можете встроить шрифт Ubuntu на свой веб-сайт - с помощью Google Font Directory (предпочтительно) или с @font-faceпомощью декларации CSS и конвертации ваших шрифтов вручную.
Использование Google Webfonts
Теперь вы можете использовать шрифт Ubuntu в качестве веб-шрифта Google. Это сделает процесс намного проще. Большая часть содержания этой части ответа взята из ответа Сладена .
Почему использование Google Font API является предпочтительным методом?
Использование Google Font API является отличным предложением, поскольку позволяет веб-шрифтам автоматически работать во всех современных браузерах, не беспокоясь о деталях. Использование API шрифтов означает, что посетители всегда будут видеть последнюю версию гарнитуры автоматически.
Как я могу использовать Google Font API?
С 21 декабря 2010 года семейство шрифтов Ubuntu теперь включено и может быть развернуто из Google Font API, посетите:
Вы можете прочитать сообщение о новостях в Google Web Font , а затем:
- Откройте Google Font Directory: страница « Ubuntu - Использовать этот шрифт »
Отметьте комбинацию весов и стилей из обычного, курсивного, полужирного и полужирного курсива, которые вам нужны для вашей веб-страницы.
Если значение по умолчанию неверно, выберите нужную комбинацию языка / сценария : русский сайт с примерами на английском языке может использовать «кириллица, латиница».
Добавьте указанный
<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 КБ. Показанный в данный момент размер 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, преобразованного в файл UFF Ubuntu-R.woff, используйте этот код CSS:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
Аналогично для Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Ubuntu Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Ubuntu Bold Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Это поддерживается всеми последними браузерами .
Соображения
Помните, что некоторые пользователи настраивают свои браузеры на использование определенного набора шрифтов, и это может раздражать, если используются пользовательские шрифты. Кроме того, прочтите Ubuntu Font License для точных условий о том, как можно распространять шрифт.
@ DKuntz2 - это действительно лучше; Теперь я изменил свой ответ.
—
dv3500ea
Не понял необходимости копировать ответ Сладена. Почему бы просто не отредактировать это?
—
Папукайя,
Я ответил на этот вопрос задолго до sladen, описав метод @ font-face. Это было до того, как шрифт был добавлен в Google Font API (это лучший метод). Я добавил только короткую заметку в начало своего ответа, и Сладен ответил гораздо более полно и получил лучший ответ для использования метода Google.
—
dv3500ea
Однако в то время мой ответ был принят и получил высокую оценку, и в результате люди могли подумать, что им следует использовать метод @ font-face, который менее предпочтителен. Sladen связался со мной по электронной почте об этом, и я согласился изменить свой ответ, указав атрибуцию, как того требует лицензия Creative Commons этого сайта.
—
dv3500ea
Использование Google Font API является отличным предложением, поскольку позволяет веб-шрифтам автоматически работать во всех современных браузерах, не беспокоясь о деталях. Использование API шрифтов означает, что посетители всегда будут видеть последнюю версию гарнитуры автоматически.
С 21 декабря 2010 года семейство шрифтов Ubuntu теперь включено и может быть развернуто из Google Font API, посетите:
Вы можете прочитать сообщение о новостях в Google Web Font , а затем:
- Откройте Google Font Directory: страница « Ubuntu - Использовать этот шрифт »
- Отметьте комбинацию весов и стилей из обычного, курсивного, полужирного и полужирного курсива, которые вам нужны для вашей веб-страницы.
- Если значение по умолчанию неверно, выберите нужную комбинацию языка / сценария : русский сайт с примерами на английском языке может использовать «кириллица, латиница».
- Скопируйте и вставьте две строки CSS в
<head> ... </head>и<style>...</style>разделы страницы HTML или шаблонов.
Примечания:
«Латиница» - это сценарий, на котором написаны английский и многие другие европейские и африканские языки.
«Подмножество» оптимизирует файлы шрифтов, отправляя символы только для определенных языков, размер шрифта составляет около 44 КБ каждый. Показанный в данный момент размер 168 КБ предназначен для всех 1 200+ символов, загружаемых одним веб-шрифтом, и большинство из них не требуется для одного веб-сайта.
Файлы шрифтов Ubuntu автоматически конвертируются в правильный формат для разных браузеров; в зависимости от марки и версии требуемый формат WOFF, EOT, SVGили TTF. Правильная комбинация CSS специфична для каждого запроса страницы и волшебным образом решает эту сложную проблему.
Рендеринг шрифтов на стороне сервера (возможно, лучше «динамический рендеринг шрифтов») был интересной проблемой в течение достаточно долгого времени.
Технически кажется логичным, что для того, чтобы компьютер отображал определенный шрифт, он должен быть уже установлен локально.
С другой стороны, веб-дизайн много теряет, придерживаясь основных / известных «веб-шрифтов».
CSS2.1 сделал некоторые улучшения с помощью объявления правила @ font-face .
Это еще не стало стандартом, но в конечном итоге это будет с CSS3.
Кроме того, было несколько альтернативных методов, таких как:
Я надеюсь, что предоставленные ссылки дадут вам лучшее представление о том, что можно сделать ;-)