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

У Пола Айриша есть способ сделать это, который охватывает большинство общих проблем. Смотрите его пуленепробиваемый @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");
}

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

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

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.

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

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

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

и вот это API, Если вы хотите сделать более веселые вещи.

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

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

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

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

попробуй такое

<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>

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

http://raphaeljs.com/

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