Нестандартные шрифты в сети?
Я недавно столкнулся с веб-страницей с помощью шрифта “ff-tisa-web-pro-1” (указанный в их файле CSS).
Как это работает? У меня определенно нет этого шрифта на моем компьютере, все же он был отображен.
5 ответов
Вы можете использовать CSS для встраивания шрифтов в веб-страницы.
Хотите отойти от "безопасных" шрифтов для создания привлекательных заголовков и сделать это без использования изображения? Используйте CSS 3 и внедрите шрифт-лицо!
Каталог шрифтов Google - интересный ресурс для понимания того, в каком направлении движутся веб-шрифты:
Google недавно выпустил Font API , он может быть вам полезен.
Вот образец страницы, с которой я недавно играл, чтобы просмотреть математические формулы в Firefox. Часть, которая (вероятно) вас больше всего интересует, это объявление css При локальном просмотре его нужно сохранить как .xhtml, а не только .html, что меня ненадолго достало. Это, конечно, связано с математикой, а не с начертанием шрифта, так что это всего лишь примечание, если вы пытаетесь использовать весь этот код целиком. Здесь есть приличный список шрифтов, которые вы можете (легально) встроить в свой документ . Typekit также предоставляет отличный способ встраивать шрифты, требующие лицензионных соглашений с типографскими организациями. В настоящее время они предлагают возможность использовать один шрифт (по вашему выбору) бесплатно. Ссылки на шрифты присутствуют в браузерах довольно давно; Проблема заключалась в том, какой формат вы могли использовать. Microsoft, конечно, поддерживала собственный формат шрифтов, а Mozilla - нет. вздох @ font-face вверху и style = "font-family: DejaVu Serif Web;" , назначенное для теги .
<?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>
Как указал Саймон, объявление CSS @ font-face можно использовать для реализации на вашем сайте шрифтов, которые традиционно не являются безопасными для Интернета. Если вы хотите попробовать это сами, обязательно ознакомьтесь с известной теперь пуленепробиваемой реализацией шрифта Пола Айриша, которая связана с генератором файлов шрифтов FontSquirrel .Теперь он поддерживает кроссбраузерность с правильной реализацией, хотя для большинства шрифтов вам придется иметь дело с лицензированием, и согласованный рендеринг по-прежнему является проблемой.
Сайт, о котором вы спрашивали, хотя и использует Typekit , одну из нескольких новых служб, которые будут размещать и обслуживать файлы шрифтов для вас (за определенную плату), и предлагает вам простую реализацию, которая маскирует сложности, связанные с @ шрифт-лицо. Google Font API похож, хотя он бесплатный и содержит / обслуживает только небольшой набор бесплатных шрифтов.
Кроме того, некоторое время существуют неродные альтернативные методы встраивания шрифтов (хотя они не будут указаны в CSS), см. cufon и sIFR .