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

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

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

21 ответов


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


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

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

например:

В разделе

:
 <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.


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

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

enter image description here

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

решения:

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

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


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

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

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

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


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

вот пример у меня работает: http://brendanjerwin.com/test_font.html


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

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

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

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


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


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

конечно, использовать Silverlight.


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


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

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


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

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

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


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

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


Я провел небольшое исследование и откопал Динамическая Замена Текста (опубликовано 2004-06-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;
 }

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

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

шрифт.в JS JavaScript и так:

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

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

http://typeface.neocracy.org/


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


см. статью 50 Полезных Инструментов Дизайна Для Красивой Веб-Типографии альтернативные методы.

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


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

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


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