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

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

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

Ответ 1

Это можно сделать с помощью 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).

Ответ 2

Вы можете добавить некоторые шрифты через 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 не так много доступных шрифтов.

Ответ 3

Для этого нужно использовать 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;
}

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

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

Ответ 4

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

@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. Некоторые инструменты, доступные в Интернете, могут сделать преобразование.

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

Ответ 5

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

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

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

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

Ответ 6

Статья Font-face в IE: создание веб-шрифтов работает говорит, что он работает со всеми тремя основными браузерами.

Вот пример, который я получил: http://brendanjerwin.com/test_font.html

Подробнее обсуждается в Вставка шрифтов.

Ответ 7

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

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

Тем не менее, это очень хорошо для заголовков. Текст тела... Я не знаю.

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

Ответ 8

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

Ответ 9

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

Конечно, используйте Silverlight.

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

а затем рисунок с этим шрифтом на Graphics.

Ответ 13

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

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

Ответ 14

Я немного поработал и выкопал Динамическая замена текста (опубликовано в 2004-06-15).

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

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

Ответ 15

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

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

Ответ 16

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

<!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>

Ответ 17

См. статью 50 полезных инструментов проектирования для красивой веб-типографии для альтернативных методов.

Я использовал Cufon. Я нашел его надежным и очень простым в использовании, поэтому я застрял с ним.

Ответ 18

Тип текста на языке шрифтов Typeface.js:

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

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

http://typeface.neocracy.org/

Ответ 19

Монотип недавно выпустил множество своих шрифтов вместе с новой системой для их использования на ваших веб-страницах: http://www.webfonts.fonts.com/

Ответ 20

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

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

Ответ 21

Я боюсь, что это ваш единственный вариант в этом случае.