Как загрузить внешние шрифты в HTML-документ?

Ответ 1

Взгляните на эту статью A List Apart. Соответствующий CSS:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Вышеуказанное будет работать в Chrome/Safari/FireFox. Как отметил Пол Д. Уэйт в комментариях, вы можете заставить его работать с IE, если вы конвертируете шрифт в формат

Ответ 2

У Пола Ирландии есть способ сделать это, который охватывает большинство общих проблем. Посмотрите его статью с пуленепробиваемым шрифтом @font-face:

Последний вариант, который останавливает ненужные данные от загрузки IE и работает в IE8, Firefox, Opera, Safari и Chrome, выглядит следующим образом:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Он также ссылается на generator, который переводит шрифты во все необходимые форматы.

Как уже указывали другие, это будет работать только в браузерах последнего поколения. Лучше всего использовать это в сочетании с чем-то вроде Cufon и загружать только Cufon, если браузер не поддерживает @font-face.

Ответ 3

CSS3 предлагает способ сделать это с помощью правила @font-face.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Здесь - это несколько разных способов, которые будут работать в браузерах, которые не поддерживают правило @font-face.

Ответ 4

Относительно ответа Джей Стивенса: "Шрифты, доступные для использования в HTML файле, должны присутствовать на пользовательском компьютере и доступны из веб-браузера, поэтому, если вы не хотите распространять шрифты на пользовательскую машину через отдельный внешний процесс, это не может быть сделано". Это правда.

Но есть другой способ использования javascript/canvas/flash - очень хорошее решение дает cufon: http://cufon.shoqolate.com/generate/ библиотека, которая генерирует очень простое для использования внешних шрифтов.

Ответ 5

Если вы хотите поддерживать больше браузеров, чем фантазию CSS3, вы можете посмотреть в библиотеке с открытым исходным кодом cufon javascript library

И вот API, если вы хотите делать больше фанковых вещей.

Major Pro: Позволяет делать то, что вы хотите/нуждаетесь.

Major Con: запрещает выбор текста в некоторых браузерах, поэтому использование соответствует заголовкам (но вы можете использовать его на всех своих сайтах, если хотите)

Ответ 6

Microsoft имеет собственный CSS-метод включения встроенных шрифтов (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), но это, вероятно, не рекомендуется.

Я использовал sIFR, так как это отлично работает - он использует Javascript и Flash для динамической замены обычного текста с помощью некоторой Flash-информации тот же текст в нужном шрифте (шрифт встроен в файл Flash). Это не влияет на разметку вокруг текста (он работает с использованием класса CSS), вы все равно можете выбрать текст, и если у пользователя нет Flash или он отключен, он будет грациозно деформировать текст в любом шрифте вы указываете в CSS (например, Arial).

Ответ 7

Попробуйте это

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>

Ответ 8

Я не видел ссылок на Raphael.js. Поэтому я думал, что включу его здесь. Raphael.js обратно совместим полностью с IE5 и очень ранним Firefox, а также всеми остальными браузерами. Он использует SVG, когда это возможно, и VML, когда он не может. То, что вы делаете с ним, - это рисовать на холст. Некоторые браузеры даже позволят вам выбрать текст, который сгенерирован. Raphael.js можно найти здесь:

http://raphaeljs.com/

Это может быть так же просто, как создать область рисования вашего документа, указав шрифт, размер шрифта, размер и т.д., а затем сообщив, чтобы он помещал вашу строку текста на бумагу. Я не уверен, что это касается вопросов лицензирования или нет, но он рисует текст, поэтому я уверен, что он обошел проблемы лицензирования. Но проконсультируйтесь с вашим адвокатом.: -)