Как добавить на сайт нестандартный шрифт?
https://stackoverflow.com/questions/107936
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли способ добавить на сайт собственный шрифт без использования изображений? Вспышка или какая-то другая графика?
Например, я работал над каким-то свадебным веб-сайтом и нашел много хороших шрифтов для этой темы, но не могу найти правильный способ добавить этот шрифт на сервер и как включить этот шрифт в CSS. в HTML?Можно ли обойтись без графики?
Решение
Это можно сделать с помощью 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 (TTF) или формат открытых веб-шрифтов (WOFF).
Другие советы
Вы можете добавить несколько шрифтов через Веб-шрифты 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.
Можно использовать 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;
}
Ссылки и дополнительная литература:
Это в основном то, что вам нужно знать о реализации этой функции.Если вы хотите больше изучить эту тему, я советую вам взглянуть на следующие ресурсы.Большая часть того, что я здесь помещаю, взята из следующего
Если под нестандартным шрифтом вы подразумеваете собственный шрифт стандартного формата, вот как я это делаю, и он работает для всех браузеров, которые я проверял на данный момент:
@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.Некоторые инструменты, доступные в Интернете, могут выполнить преобразование.
Но если вы хотите прикрепить шрифт в нестандартном формате (растровые изображения и т. д.), я вам не смогу помочь.
Я обнаружил, что самый простой способ разместить на веб-сайте нестандартные шрифты — использовать СИФР
Он предполагает использование объекта Flash, содержащего шрифт, но он легко превращается в стандартный текст/шрифт, если Flash не установлен.
Стиль задается в вашем CSS, а JavaScript устанавливает замену Flash для вашего текста.
Редактировать:(Я по-прежнему рекомендую использовать изображения для нестандартных шрифтов, поскольку sIFR увеличивает время проекта и может потребовать обслуживания).
Статья Шрифт-лицо в IE:Как заставить веб-шрифты работать говорит, что работает со всеми тремя основными браузерами.
Вот образец, который я получил: http://brendanjerwin.com/test_font.html
Дальнейшее обсуждение находится в Встраивание шрифтов.
Шрифт.js и Куфон есть еще два интересных варианта.Это компоненты JavaScript, которые отображают специальные данные шрифта в формате JSON (который можно преобразовать из TrueType или OpenType форматы на своих веб-сайтах) через новый элемент <canvas> во всех новых браузерах, кроме Internet Explorer, а также через ВМЛ в Internet Explorer.
Основная проблема обоих (на данный момент) заключается в том, что выделение текста не работает или, по крайней мере, работает довольно неудобно.
Тем не менее, это очень хорошо для заголовков.Основной текст...Я не знаю.
И это на удивление быстро.
Или вы можете попробовать СИФР.Я знаю, что он использует Flash, но только если он доступен.Если Flash недоступен, исходный текст отображается исходным шрифтом (CSS).
Есть ли способ добавить собственный шрифт на сайт без использования...Вспышка ?
Конечно, используйте Сильверлайт.
Техника, рекомендованная 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» дает результат. http://www.spoono.com/html/tutorials/tutorial.php?id=19
Если вы хотите оставаться независимым от платформы (и вам следует это делать!), вам придется использовать изображения или просто использовать стандартный шрифт.
Я провел небольшое исследование и откопал Динамическая замена текста (опубликовано 15 июня 2004 г.).
В этом методе используются изображения, но он выглядит «свободными руками».Вы пишете текст и позволяете нескольким автоматизированным сценариям автоматически выполнять поиск и замену на странице за вас на лету.
У него есть некоторые ограничения, но, вероятно, это один из самых простых вариантов (и более совместимых с браузерами), чем все остальные, которые я видел.
Также возможно использовать шрифты 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>
Typeface.js JavaScript Способ:
С помощью signface.js вы можете встроить пользовательские шрифты на свои веб -страницы, чтобы вам не приходилось отображать текст на изображения
Вместо того, чтобы создавать изображения или использовать Flash, просто для того, чтобы показать графический текст вашего сайта в желаемом шрифте, вы можете использовать Sypeface.js и написать в простом HTML и CSS, как если бы у ваших посетителей был установлен шрифт локально.
Monotype недавно выпустила множество своих шрифтов вместе с новой системой их использования на ваших веб-страницах: http://www.webfonts.fonts.com/
Посмотреть статью 50 полезных инструментов дизайна для красивой веб-типографики для альтернативных методов.
Я использовал только Куфон.Я нашел его надежным и очень простым в использовании, поэтому остановился на нем.
Если у вас есть файл вашего шрифта, вам нужно будет добавить дополнительные форматы этого шрифта для других браузеров.
Для этой цели я использую генератор шрифтов, например Шрифтsquirrel он предоставляет все форматы шрифтов и CSS @font-face, вам нужно будет просто перетащить его в свой CSS-файл.
Боюсь, в этом случае графика — ваш единственный вариант.
