Нестандартные шрифты в сети?

Недавно я наткнулся навеб-страницу, использующую шрифт "ff-tisa-web-pro-1" (указанный в их CSS-файле).

Как это работает? У меня определенно нет этого шрифта на моем компьютере, но он был отображен.

5 11
css fonts font-face

5 ответов:

Вы можете использовать CSS для встраивания шрифтов в веб-страницы.

Хотите избавиться от "веб-безопасных" шрифтов для некоторых привлекательных заголовков и сделать это без использования изображения? Используйте CSS 3 и добавьте шрифт-лицо!

Http://www.zenelements.com/blog/css3-embed-font-face/

4

Как отметил Саймон, объявление CSS @font-face может быть использовано для реализации традиционно небезопасных шрифтов на вашем сайте. Если вы хотите попробовать это самостоятельно, обязательно проверьте теперь знаменитую реализацию пуленепробиваемого шрифта пола Айриша, которая ссылается на генератор файлов шрифтов FontSquirrel. Теперь он поддерживается кросс-браузером с правильной реализацией, хотя с большинством шрифтов вам придется иметь дело с лицензированием, и согласованный рендеринг все еще является вопрос.

Сайт, о котором вы спросили, хотя используетTypekit , один из нескольких новых сервисов, которые будут размещать и обслуживать файлы шрифтов для вас (за плату), и предлагает вам простую реализацию, которая маскирует сложности @font-face. Google Font API аналогичен, хотя он бесплатный и только размещает/обслуживает небольшой выбор бесплатных шрифтов.

Кроме того, неродные альтернативные методы встраивания шрифтов уже некоторое время существуют (хотя они не будут указаны в CSS), см. cufon и sIFR.

11

Вот пример страницы, с которой я недавно играл, чтобы просмотреть математические формулы в 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">&#x2212;<!-- &minus; --></mo>
                            <mi>b</mi>
                            <mo>&#x00B1;<!-- &PlusMinus; --></mo>
                            <msqrt>
                                <msup>
                                    <mi>b</mi>
                                    <mn>2</mn>
                                </msup>
                                <mo>&#x2212;<!-- &minus; --></mo>
                                <mn>4</mn>
                                <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
                                <mi>a</mi>
                                <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
                                <mi>c</mi>
                            </msqrt>
                        </mrow>
                        <mrow>
                            <mn>2</mn>
                            <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
                            <mi>a</mi>
                        </mrow>
                    </mfrac>
                </mrow>
            </math>
        </p>
    </div>
</body>
</html>

При просмотре локально, он должен быть сохранен как .xhtml, не только .html, который меня немного достал. Это, конечно, связано с математикой, а не с шрифтом, поэтому это только Примечание, Если вы пытаетесь использовать этот код целиком.

Есть приличный список шрифтов, которые вы можете (легально) встроить в свой документ здесь.

Typekit также предоставляет отличный способ встраивания шрифтов, которые требуют лицензионных сделок с литейными заводами. В настоящее время они предлагают возможность использовать один шрифт (по вашему выбору) бесплатно.

Связывание шрифтов существует в браузерах уже довольно давно; проблема заключалась в том, какой формат вы могли бы использовать. Microsoft, конечно, поддерживала собственный формат шрифтов, а Mozilla-нет. вздох

2

Каталог шрифтов Google-это интересный ресурс для понимания направления, в котором движутся веб-шрифты:

Http://code.google.com/webfonts/preview

2

Google недавно выпустилаFont API , это может быть вам полезно.

2