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

Question

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

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

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

21 457

html css fonts font-face

21 ответ:

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

технически, шрифты размещаются в 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; }
решение кажется вполне надежным (даже разбивая журнал использует его для название статьи.). Есть, однако, не так много шрифтов, доступных до сих пор в Каталог Шрифтов Google.

104

путь заключается в использовании объявления @ font-face CSS, которое позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах. Позволяя авторам предоставлять свои собственные шрифты, @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 веб-шрифты ?

как архивировать Кросс-браузер @font-face support

@font-face в CSS Mozilla Developer Network

66

Если под нестандартным шрифтом вы подразумеваете пользовательский шрифт стандартного формата, вот как я это делаю, и он работает для всех браузеров, которые я проверил до сих пор:
@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

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

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

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

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

11

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

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

10

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

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

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

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

10

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

8

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

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

5

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

4

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

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

4

Если вы используете ASP.NET, очень легко создавать шрифты на основе изображений без необходимости установки (например, при добавлении в установленную базу шрифтов) шрифтов на сервере с помощью:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
и затем рисование с этим шрифтом на Graphics.

4

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

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

3

Я сделал немного исследований и выкопал Динамическая Замена Текста (опубликовано 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>

3

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

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

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

http://typeface.neocracy.org/

2

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

2

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

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

2

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

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

2

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

1

hangy · Accepted Answer · 2015-12-22 14:32:04

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