Question

我最近遇到了a web page using the font “ff-tisa-web-pro-1”（在他们的CSS文件中指定）。

这是如何工作的？我的计算机上肯定没有这个字体，但它已经显示出来了。

Answer 1

正如Simon指出的那样，CSS @ font-face声明可用于在您的站点上实现传统的非Web安全字体。如果你想亲自尝试一下，一定要看看Paul Irish现在着名的bulletproof font face implementation，它链接到FontSquirrel's font file generator。它现在支持具有正确实现的跨浏览器，尽管大多数字体都必须处理许可，并且一致的渲染仍然是一个问题。

您询问的网站使用Typekit，这是为您托管和提供字体文件的几项新服务之一（收费），并为您提供简单的实施，掩盖了@ font-的复杂性面对。谷歌的Font API是类似的，虽然它是免费的，只有主机/提供一小部分免费字体。

此外，嵌入字体的非原生替代技术已经存在了一段时间（虽然它们不会在CSS中显示），请参阅cufon和sIFR。

Answer 2

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

想要摆脱'Web Safe'字体以获取一些有吸引力的标题并且不使用图像就可以实现吗？使用CSS 3并嵌入font-face！

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

Answer 3

这是我最近玩的一个示例页面，用于在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，这让我有点兴奋。当然，这与math-y的东西有关，而不是font-face，所以如果你试图使用这个代码，那只是一个注释。

您可以（合法地）在您的文档here中嵌入一个不错的字体列表。

Typekit还提供了一种非常好的方法来嵌入需要与类型代工厂进行许可交易的字体。他们目前提供免费使用一种字体（您选择的）的能力。

字体链接已经在浏览器中使用了很长时间;问题在于您可以使用哪种格式。当然，微软支持专有的字体格式，而Mozilla则没有。叹息

Answer 4

Google字体目录是了解网络字体移动方向的有趣资源：

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

Answer 5

Google最近发布了Font API，它可能对你有用。

网络中的非标准字体？

5 个答案: