12
4

5 回答 5

11

正如 Simon 指出的那样,CSS @font-face 声明可用于在您的网站上实现传统上非网络安全的字体。如果你想自己尝试,一定要看看 Paul Irish 现在著名的防弹字体实现,它链接到FontSquirrel 的字体文件生成器。它现在支持正确实现的跨浏览器,尽管对于大多数字体,您必须处理许可问题,并且一致的渲染仍然是一个问题。

您询问的站点虽然使用Typekit,但它是为您托管和提供字体文件的几个新服务之一(收费),并为您提供了一个简单的实现,可以掩盖@font-face 的复杂性。Google 的Font API与此类似,尽管它是免费的,并且仅托管/提供少量免费字体。

此外,用于嵌入字体的非本地替代技术已经存在了一段时间(尽管它们不会在 CSS 中指明),请参阅cufonsIFR

于 2010-06-03T20:11:15.930 回答
4

您可以使用 CSS 在网页中嵌入字体。

想要摆脱一些吸引人的标题的“网络安全”字体并且不使用图像吗?使用 CSS 3 并嵌入字体!

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

于 2010-06-03T20:02:08.677 回答
2

谷歌最近发布了Font API,可能对你有些用处。

于 2010-06-03T21:31:33.000 回答
2

这是我最近在玩的一个示例页面,用于在 Firefox 中查看数学公式。您(可能)最感兴趣的部分是@font-face顶部的 css 声明,以及style="font-family: DejaVu Serif Web;"分配给<div>and<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还提供了一种很好的嵌入字体的方法,这些字体确实需要与字体代工厂达成许可协议。他们目前提供免费使用一种字体(您选择的字体)的能力。

字体链接在浏览器中已经存在很长时间了。问题在于您可以使用什么格式。当然,微软支持专有字体格式,而 Mozilla 不支持。

于 2010-06-03T20:29:17.147 回答
2

The Google Font Directory is an interesting resource for understanding the direction web fonts are moving in:

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

于 2010-06-03T20:37:24.077 回答