Нестандартные шрифты в сети? - PullRequest
11 голосов
/ 04 июня 2010

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

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

Ответы [ 5 ]

11 голосов
/ 04 июня 2010

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

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

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

4 голосов
/ 04 июня 2010

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

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

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

2 голосов
/ 04 июня 2010

Google недавно выпустила API шрифтов , возможно, вам он пригодится

2 голосов
/ 04 июня 2010

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

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

2 голосов
/ 04 июня 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">&#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 - нет. Вздох

...