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

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

485 голосов
/ 20 сентября 2008

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

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

Ответы [ 21 ]

4 голосов
/ 20 сентября 2008

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

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

4 голосов
/ 20 сентября 2008

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

3 голосов
/ 20 сентября 2008

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

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

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

3 голосов
/ 20 сентября 2008

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

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

3 голосов
/ 11 ноября 2017

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

<!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 голосов
/ 22 февраля 2014

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

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
2 голосов
/ 11 февраля 2016

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

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

2 голосов
/ 06 апреля 2010

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

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

2 голосов
/ 31 мая 2010

Typeface.js JavaScript Путь:

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

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

http://typeface.neocracy.org/

2 голосов
/ 19 июня 2010

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

Страница:
...