it-swarm.com.ru

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

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

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

485
vaske

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

473
hangy

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

113
Michał Pękała

Для этого нужно использовать 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 - Только самые последние браузеры

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

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

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

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

70
Javier Cadiz

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

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

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

16
BiAiB

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

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

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

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

11
Matt

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

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

Дополнительную информацию можно найти в встраивание шрифтов.

10
brendanjerwin

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

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

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

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

10
Thomas

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

8
Casper

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

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

5
TraumaPony

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

4
Steve Moyer

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

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

4
zobier

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

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

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

4
mattlant

Также можно использовать шрифты 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
Wilf

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

<!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>
3
Abhijeet Kumar

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

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

3
James Muscat

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

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

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

3
Kent Fredric

Typeface.js JavaScript Путь:

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

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

http://typeface.neocracy.org/

2
bakkal

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

2
Cogwheel

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

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

2
Blair

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

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

2
saadeez

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

1
Ed Brown