Недавно я наткнулся на веб-страницу, использующую шрифт «ff-tisa-web-pro-1» (указан в их CSS-файл).
Как это работает? У меня точно нет этого шрифта на компе, но он отображался.
Нестандартные шрифты в сети?
comment
Если вы хотите большего, чем предположения, вы должны предоставить нам свой браузер (и версию) и веб-сайт.
- person Brendan Long schedule 04.06.2010
Ответы (5)
Вы можете использовать CSS для встраивания шрифтов в веб-страницы.
Хотите отказаться от «веб-безопасных» шрифтов для некоторых привлекательных заголовков И сделать это без использования изображения? Используйте CSS 3 и вставьте шрифт!
http://www.zenelements.com/blog/css3-embed-font-face/
person
Gelatin
schedule
03.06.2010
Вау, это старая статья :) Рад, что Netscape Navigator на высоте
- person zildjohn01; 04.06.2010
Отредактировано для ссылки на более новую статью.
- person Gelatin; 04.06.2010
Изменил свой голос против на голос за после изменения последней статьи :)
- person Phliplip; 04.06.2010
-1, потому что рассматриваемый сайт на самом деле использует TypeKit, и ответ слишком прост.
- person Andrew; 04.06.2010
Как заметил Саймон, объявление CSS @font-face можно использовать для реализации на вашем сайте традиционно небезопасных для Интернета шрифтов. Если вы хотите попробовать это сами, обязательно ознакомьтесь с ныне известным пуленепробиваемым шрифтом Пола Айриша. реализации, которая ссылается на генератор файлов шрифтов FontSquirrel. Теперь он поддерживается в разных браузерах с правильной реализацией, хотя для большинства шрифтов вам придется иметь дело с лицензированием, а согласованный рендеринг все еще остается проблемой.
Сайт, о котором вы спрашивали, использует Typekit, одну из нескольких новых служб, которые будут размещать и обслуживать файлы шрифтов для вас (для плату) и предлагает вам простую реализацию, которая маскирует сложности @font-face. Google Font API аналогичен, хотя он бесплатный и содержит/обслуживает только небольшой набор бесплатных шрифтов. .
Кроме того, некоторое время существовали неродные альтернативные методы встраивания шрифтов (хотя они не будут указаны в CSS), см. cufon и sIFR.
person
Andrew
schedule
03.06.2010
Вот пример страницы, с которой я недавно играл, чтобы просмотреть математические формулы в 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 — нет. вздыхает
person
Xiong Chiamiov
schedule
03.06.2010
Не уверен, как это сочетается с юридической стороной вещей, но генератор FontSquirrel включает флаг, который искажает шрифт таким образом, что его нельзя установить или использовать в качестве настольного шрифта. Конечно, они по-прежнему требуют от вас указать, что вы имеете право распространять шрифт...
- person GalacticCowboy; 04.06.2010
Google Font Directory — интересный ресурс для понимания направления, в котором движутся веб-шрифты:
http://code.google.com/webfonts/preview
person
blissapp
schedule
03.06.2010
Компания Google недавно выпустила Font API. Возможно, он вам пригодится.
person
Josef Sábl
schedule
03.06.2010
