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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я провел небольшое исследование и откопал Замена динамического текста (опубликовано 15.06.2004).

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

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

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

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

Более подробное обсуждение находится в Встраивание шрифтов.

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

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

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

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

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

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

Typeface.js Способ JavaScript:

With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images

Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

http://typeface.neocracy.org/

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

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

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

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

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

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

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

Лучше всего использовать объявление 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 - Только последние версии браузеров

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

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

Ссылки и дополнительная литература:

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

• Использование шрифта (очень рекомендуется)
• Пуленепробиваемый синтаксис @ font-face
• Могу ли я использовать веб-шрифты @ font-face?
• Как заархивировать поддержку Cross-Browser @ font-face
• @ font-face в сети разработчиков CSS Mozilla

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

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

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

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

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}