logo标签列表

网页中的非标准字体？

cssfontsfont-face
12
如果你想要更多的信息，你应该告诉我们你使用的浏览器（及版本）和网站。 - Brendan Long
5个回答
11
正如Simon所指出的那样，CSS @font-face声明可用于在您的网站上实现传统上不安全的字体。如果您想尝试自己实现，请务必查看Paul Irish的bulletproof font face implementation，其中链接到FontSquirrel的字体文件生成器。它现在已经通过正确的实现在跨浏览器中得到支持，尽管对于大多数字体，您仍将需要处理许可证，并且一致的呈现仍然是一个问题。
但是，您提问的网站使用Typekit，这是几个新服务之一，可以为您托管和提供字体文件（需付费），并为您提供易于实现的方法来掩盖@font-face的复杂性。Google的Font API类似，尽管它是免费的，并且仅托管/提供了一小部分免费字体。
此外，嵌入字体的非本机替代技术已经存在一段时间了（虽然它们不会在CSS中指示），请参见cufon和sIFR。
4
哇，这是一篇老文章啊 :) 很高兴Netscape Navigator还在保持更新。 - zildjohn01
已编辑以链接到更新的文章。 - Gelatin
2
在最新的文章更改后，我将我的反对投票改为赞成投票 :) - Phliplip
-1 是因为相关网站实际上使用的是 TypeKit，而答案过于简单。 - Andrew
2
以下是我最近在Firefox中查看数学公式时玩耍的样本页面。您（很可能）最感兴趣的部分是顶部的css @font-face声明以及分配给<div>和<math>标记的style="font-family: DejaVu Serif Web;"。
<?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则不支持。叹气
不确定这对法律方面的影响如何，但FontSquirrel生成器包括一个标志，以一种使字体无法安装或用作桌面字体的方式混淆字体。当然，他们仍然要求您声明拥有分发字体的权利... - GalacticCowboy
2
2
谷歌最近发布了字体 API，它可能对你有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接