Недавно я наткнулся на веб-страницу, используя шрифт ff-tisa-web-pro-1 (указанный в их файле CSS).
Как это работает? У меня определенно нет этого шрифта на моем компьютере, но он был отображен.
Нестандартные шрифты в Интернете?
Ответ 1
Вы можете использовать CSS для встраивания шрифтов в веб-страницы.
Хотите уйти от "Web Safe шрифтов" для некоторых привлекательных заголовков? И делать это без использования изображения? Используйте CSS 3 и вставляйте шрифт!
Ответ 2
Как отметил Саймон, объявление CSS @font-face можно использовать для реализации традиционно небезопасных шрифтов на вашем сайте. Если вы хотите попробовать это самостоятельно, обязательно ознакомьтесь с Paul Irish, теперь известной пуленепробиваемой реализацией шрифта, которая ссылается на Генератор файлов шрифтов FontSquirrel. Теперь он поддерживает кросс-браузер с правильной реализацией, хотя с большинством шрифтов вам придется иметь дело с лицензированием, и постоянный рендеринг по-прежнему остается проблемой.
Сайт, о котором вы просили, использует Typekit, одну из нескольких новых служб, которые будут размещать и обслуживать файлы шрифтов для вас (для плата), и предлагает вам легкую реализацию, которая маскирует сложности @font-face. Google Font API аналогичен, хотя он бесплатный и содержит только хосты/обслуживает небольшой выбор бесплатных шрифтов.
Кроме того, некорректные альтернативные методы для встраивания шрифтов существовали некоторое время (хотя они не указывались в CSS), см. cufon и sIFR.
Ответ 3
Вот пример страницы, с которой я недавно играл, чтобы просматривать математические формулы в Firefox. Наиболее интересной для вас является объявление css @font-face вверху, а style="font-family: DejaVu Serif Web;" - теги <div> и <math>.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mathy fonts test</title>
<style type="text/css">
@font-face {
font-family: DejaVu Serif Web;
src: url(/fonts/DejaVu/ttf/DejaVuSerif.ttf) format("truetype");
}
</style>
</head>
<body>
<h1>DejaVu Serif</h1>
<div style="font-family: DejaVu Serif Web;">
<p>
Nulla eu commodo neque. Donec nec nisi libero. Integer sollicitudin leo
vel arcu elementum mattis. Vivamus eu sodales odio. Curabitur eu auctor
leo. Pellentesque adipiscing nulla iaculis ante commodo aliquet. Donec
egestas tincidunt tincidunt. Nunc ut condimentum orci. Aenean in egestas
tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur suscipit, sapien ut dignissim
pellentesque, lacus risus facilisis odio, et tristique nunc quam et
mauris. Quisque pellentesque nulla et dui bibendum suscipit. Aenean
consectetur adipiscing nulla, a molestie nunc semper non. Quisque at
ipsum quis turpis gravida commodo et vel felis. Integer lobortis augue
eu tortor aliquet nec mattis nulla aliquam. Sed ornare cursus urna et
congue.
</p>
<p>
<math style="font-family: DejaVu Serif Web;" mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−<!-- − --></mo>
<mi>b</mi>
<mo>±<!-- ± --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−<!-- − --></mo>
<mn>4</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
<mo>⁢<!-- ⁢ --></mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>
</div>
</body>
</html>
Если вы просматриваете локально, его нужно сохранить как .xhtml, а не только .html, который немного меня достал. Это, конечно, связано с математическим материалом, а не с шрифтом, поэтому это только примечание, если вы пытаетесь использовать этот код целиком.
Там есть достойный список шрифтов, которые вы можете (юридически) включить в свой документ здесь.
Typekit также предоставляет отличный способ встраивать шрифты, которые требуют лицензионных сделок с типами литейных цехов. В настоящее время они предлагают возможность использовать один шрифт (по вашему выбору) бесплатно.
Связывание шрифтов было в браузерах довольно долго; проблема заключалась в том, какой формат вы могли бы использовать. Microsoft, конечно же, поддерживала собственный формат шрифтов, а Mozilla этого не делал. Вздох
Ответ 4
Справочник Font Google - интересный ресурс для понимания направления веб-шрифтов:
Ответ 5
Недавно Google выпустил Font API, он может вам пригодиться.