Как добавить какой-нибудь нестандартный шрифт на сайт?

519

Есть ли способ добавить какой-нибудь пользовательский шрифт на сайт без использования изображений, Flash или другой графики?

Например, я работал над свадебным сайтом и нашел много хороших шрифтов на эту тему. Но я не могу найти правильный способ добавить этот шрифт на сервер. И как мне включить этот шрифт с CSS в HTML? Можно ли обойтись без графики?

html css fonts font-face Васкэ
источник
18
Поскольку этот вопрос был задан, @font-faceон получил гораздо большую поддержку и рекомендуется для общего использования. Вы просто должны знать, что IE требует шрифты в другом формате для других браузеров. См. Stackoverflow.com/questions/2219916/is-font-face-usable-now
Дэвид Джонстон
10
Убедитесь, что у вас есть право распространять шрифт!
Вьетнам,
2
Посетите typekit.com или за дешевым fontsquirrel.com
bjudson
1
Связанный stackoverflow.com/questions/8050640/…
Adrien Be
3
www.fontsquirrel.com отлично подходит для создания необходимых файлов шрифтов и создания хорошего пуленепробиваемого синтаксиса @fontface (как и рекомендуемый fontspring.com/blog/fixing-ie9-font-face-problems )
Adrien Be

Ответы:

500

Это можно сделать с помощью CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Он поддерживается для всех обычных браузеров, если вы используете TrueType-Fonts (TTF) или Web Open Font Format (WOFF).

висят
источник
13
И Internet Explorer, и Firefox НЕ основаны на Webkit, поэтому, на мой взгляд, это довольно бесполезное решение.
Каспер
58
Это не бесполезно, так как это стандарт: чем больше вы реализуете его, тем больше он будет реализован браузерами. Это не означает, что вы не должны находить другой способ компенсации, но использование этого в качестве дополнения кажется мне хорошим.
E-Удовлетворение
8
Firefox 3.1 поддерживает @ font-face.
Ms2ger
2
@brendanjerwin: обновленная версия вашей ссылки - brendanjerwin.com/development/web/2009/03/03/…
Мэтт Болл
60
Эй, ребята, угадайте что? Сейчас уже почти 2016! Это теперь широко поддерживается! Ура! Рад, что нашел этот ответ так поздно. Ха - ха.
Джессика
121

Вы можете добавить некоторые шрифты через Google Web Fonts .

Технически шрифты размещаются в Google, и вы связываете их в заголовке HTML. Затем вы можете свободно использовать их в CSS с @font-face( читайте об этом ).

Например:

В <head>разделе:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Тогда в CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

Решение кажется достаточно надежным (даже Smashing Magazine использует его для заголовка статьи ). Однако в каталоге шрифтов Google не так много доступных шрифтов .

Михал Пенкала
источник
1
В июле 2014 года Google расширил шрифты и включил шрифты Google Noto, которые поддерживают большинство языков google.com/get/noto/# . Abobe поддержал эту инициативу по открытию шрифтов, поддерживая все языки blog.typekit.com/2014/07/15/introduction-source-han-sans
vsingh
кажется (веб-шрифты Google) не поддерживают версии шрифтов .eot и .woff и .svg. он просто поддерживает .ttf версию шрифтов!
Махди Джазини
77

Для этого нужно использовать CSS-объявление @ font-face, которое позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах. Позволяя авторам предоставлять свои собственные шрифты, @ font-face устраняет необходимость зависеть от ограниченного числа шрифтов, установленных пользователями на их компьютерах.

Посмотрите на следующую таблицу:

введите описание изображения здесь

Как видите, есть несколько форматов, о которых вам нужно знать, в основном из-за кросс-браузерной совместимости. Сценарий в мобильных устройствах не сильно отличается.

Решения:

1 - Полная совместимость браузера

Это метод с самой глубокой поддержкой, возможной сейчас:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - Большая часть браузера

Вещи сильно смещаются в сторону WOFF , так что вы можете сойти с рук:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Только самые последние браузеры

Или даже просто вон.
Затем вы используете это так:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Ссылки и дальнейшее чтение:

Это в основном то, что вам нужно знать о реализации этой функции. Если вы хотите больше изучить эту тему, я рекомендую взглянуть на следующие ресурсы. Большая часть того, что я положил здесь, извлечена из следующего

Хавьер Кадис
источник
2
Чрезвычайно удобный инструмент Font Squirrel может генерировать CSS, необходимый для полной поддержки браузера. Он даже позволяет загружать шрифт как любой из этих форматов, конвертировать его во все остальные форматы и позволяет загружать их все. Это спасатель жизни, когда дело доходит до пользовательских шрифтов.
Джейкоб Стамм
Что означает svgFontName? Должен ли я изменить его на фамилию своего шрифта или оставить как есть?
Герман
17

Если под нестандартным шрифтом вы подразумеваете нестандартный шрифт стандартного формата, вот как я это делаю, и он работает для всех браузеров, которые я проверял до сих пор:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

так что вам просто понадобятся шрифты ttf и eot. Некоторые инструменты, доступные онлайн, могут сделать преобразование.

Но если вы хотите прикрепить шрифт в нестандартном формате (растровые изображения и т. Д.), Я не могу вам помочь.

BiAiB
источник
1
Пример интерактивного инструмента: kirsle.net/wizards/ttf2eot.cgi Пример автономного инструмента: code.google.com/p/ttf2eot/wiki/Demo - также должно быть возможно использование шрифтов WOFF .
Уилф
11

Я обнаружил, что самый простой способ иметь нестандартные шрифты на сайте - это использовать sIFR

Он включает в себя использование объекта Flash, который содержит шрифт, но он хорошо разлагается до стандартного текста / шрифта, если Flash не установлен.

Стиль устанавливается в вашем CSS, а JavaScript устанавливает замену Flash для вашего текста.

Редактировать: (я все еще рекомендую использовать изображения для нестандартных шрифтов, так как sIFR увеличивает время проекта и может потребовать обслуживания).

Matt
источник
24
Какая ужасная идея! В моем браузере есть вспышка, но есть и флэшблок. На этом сайте мой браузер отображает ужасную искаженную страницу. Flash должен оставаться тем, что вы используете для больших анимаций или фильмов. Слишком много вспышки очень раздражает и визуально, мой мой ...
Э-Удовлетворение
2
@ E-удовлетворительно: как так? Лично я никогда не замечаю разницы между страницей, которая использует sIFR, и страницей, которая не использует, за исключением тонких различий в визуализации текста. Честно говоря, я думаю, что это отличная идея, хотя @font-faceгораздо лучше там, где ее поддерживают.
Саша Чедыгов
«Изменить: (я все еще рекомендую использовать изображения для нестандартных шрифтов, так как sIFR увеличивает время проекта и может потребовать обслуживания)». очень хорошо сказано. SIFR - действительно классная техника, но, похоже, требуется много, чтобы получить ТОЧНЫЙ вид, который вы хотите. Если у вас есть время изучить и освоить эту технику, я очень рекомендую ее. Но если вы ищете быструю и простую технику замены шрифта, я бы использовал замену изображения или даже свойство @ font-face css
Дерек Адэйр,
10

Typeface.js и Cufon - два других интересных варианта. Это компоненты JavaScript, которые отображают данные специальных шрифтов в формате JSON (который вы можете конвертировать из форматов TrueType или OpenType на своих веб-сайтах) через новый элемент <canvas> во всех новых браузерах, кроме Internet Explorer, и через VML в Internet Explorer.

Основная проблема с обоими (на данный момент) состоит в том, что выделение текста не работает или, по крайней мере, работает очень неловко.

Тем не менее, это очень приятно для заголовков. Основной текст ... я не знаю.

И это на удивление быстро.

Томас
источник
Еще один интересный вариант - typekit.com Аналогичная концепция.
Зак
8

Или вы можете попробовать SIFR . Я знаю, что он использует Flash, но только при наличии. Если Flash недоступен, он отображает исходный текст в исходном (CSS) шрифте.

Casper
источник
4

Техника, рекомендованная W3C для этого, называется «встраиванием» и хорошо описана в трех статьях: Встраивание шрифтов . В моих ограниченных экспериментах я обнаружил, что этот процесс подвержен ошибкам и имел ограниченный успех в том, чтобы заставить его функционировать в среде с несколькими браузерами.

Стив Мойер
источник
4

Safari и Internet Explorer поддерживают правило CSS @ font-face, однако они поддерживают два разных типа встроенных шрифтов. Firefox планирует поддерживать тот же тип, что и Apple, в ближайшее время. SVG может встраивать шрифты, но пока не так широко поддерживается (без плагина).

Я думаю, что наиболее переносимое решение, которое я видел, - это использовать функцию JavaScript для замены заголовков и т. Д. Изображением, сгенерированным и кэшированным на сервере, с выбранным вами шрифтом - таким образом, вы просто обновляете текст и не должны разбираться в фотошопе.

zobier
источник
Это не должно быть сделано с помощью JavaScript. Я знаю, что многие люди любят использовать JavaScript для многих вещей в наше время, но стандартная техника CSS может быть более подходящей здесь. См sitepoint.com/article/header-images-css-xhtml
hangy
Извините, если есть путаница, техника относится не к методу замены изображения, который, как вы говорите, может быть CSS. Речь идет о генерации графики, представляющей данную строку в определенном шрифте / стиле, на лету, на сервере - избавляя от необходимости создавать их вручную.
zobier
4

Если вы используете ASP.NET, очень просто генерировать шрифты на основе изображений без необходимости устанавливать (как при добавлении к установленной базе шрифтов) шрифты на сервер, используя:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

а затем рисовать с этим шрифтом на Graphics.

mattlant
источник
1
ну да ... а вы пользователь можете забыть о копировании и вставке. И масштабирование тоже, в старых браузерах. Я даже не говорю о проблемах пропускной способности!
E-Удовлетворение
2
Да, хорошо, и в вопросе указано, что он будет использовать его для содержимого текста? Нет, это не было, это был общий вопрос, и это был общий ответ. Небольшие фрагменты текста, заголовки и т. Д. Не занимают много трафика. Sheesh, получить контроль!
Mattlant
3

Похоже, он работает только в Internet Explorer, но быстрый поиск в Google по запросу «html embed fonts» дает http://www.spoono.com/html/tutorials/tutorial.php?id=19

Если вы хотите оставаться независимым от платформы (и вы должны!), Вам придется использовать изображения или просто использовать стандартный шрифт.

Джеймс Маскат
источник
3

Я провел небольшое исследование и выкопал Dynamic Text Replacement (опубликовано в 2004-06-15).

Эта техника использует изображения, но, похоже, «свободные руки». Вы пишете свой текст, и вы позволяете нескольким автоматизированным сценариям выполнять поиск и замену на странице для вас на лету.

У него есть некоторые ограничения, но это, вероятно, один из более простых вариантов (и более совместимых с браузером), чем все остальные, которые я видел.

Кент Фредрик
источник
3

Также можно использовать шрифты WOFF - пример здесь

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
Уилф
источник
3

Просто предоставьте ссылку на реальный шрифт, как этот, и вам будет хорошо идти

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
Абхиджит Кумар
источник
Хорошая простая альтернатива. И вы обязательно имеете права на его использование. См. Developer.google.com/fonts/docs/getting_started
Тим Эриксон,
2

Typeface.js JavaScript Путь:

С typeface.js вы можете встраивать пользовательские шрифты в ваши веб-страницы, чтобы вам не приходилось выводить текст на изображения

Вместо того, чтобы создавать изображения или использовать flash для отображения графического текста вашего сайта нужным шрифтом, вы можете использовать typeface.js и писать в простом HTML и CSS, как если бы у ваших посетителей был установлен локальный шрифт.

http://typeface.neocracy.org/

Bakkal
источник
2

Если у вас есть файл вашего шрифта, вам нужно будет добавить больше форматов этого шрифта для других браузеров.

Для этого я использую генератор шрифтов, такой как Fontsquirrel, он предоставляет все форматы шрифтов и его @ font-face CSS, вам нужно будет просто перетащить его в свой файл CSS.

saadeez
источник