当前位置：文江博客话题详情

网络中的非标准字体？

发布于 2024-09-04 07:01:57 字数 146 浏览 5 评论 0原文

我最近遇到一个使用字体“ff-tisa-web-pro-1”的网页（在他们的 CSS 文件）。

这是如何运作的？我的电脑上肯定没有这个字体，但它却显示了。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

平定天下 2024-09-11 07:01:57

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

您询问的网站使用 Typekit，它是为您托管和提供字体文件的几个新服务之一（对于费），并为您提供了一个简单的实现，掩盖了 @font-face 的复杂性。 Google 的 Font API 类似，尽管它是免费的并且仅托管/提供一小部分免费字体。

此外，用于嵌入字体的非本地替代技术已经存在了一段时间（尽管它们不会在 CSS 中指示），请参阅 cufon 和 sIFR。

回复收藏 0 原文

烟酉 2024-09-11 07:01:57

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

想要摆脱“网络安全”字体以获得一些有吸引力的标题并且不使用图像吗？使用 CSS 3 并嵌入字体！

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

回复收藏 0 原文

ㄟ。诗瑗 2024-09-11 07:01:57

这是我最近在 Firefox 中查看数学公式的示例页面。您（可能）最感兴趣的部分是顶部的 css @font-face 声明，以及 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">−<!-- − --></mo>
                            <mi>b</mi>
                            <mo>±<!-- ± --></mo>
                            <msqrt>
                                <msup>
                                    <mi>b</mi>
                                    <mn>2</mn>
                                </msup>
                                <mo>−<!-- − --></mo>
                                <mn>4</mn>
                                <mo>⁢<!-- ⁢ --></mo>
                                <mi>a</mi>
                                <mo>⁢<!-- ⁢ --></mo>
                                <mi>c</mi>
                            </msqrt>
                        </mrow>
                        <mrow>
                            <mn>2</mn>
                            <mo>⁢<!-- ⁢ --></mo>
                            <mi>a</mi>
                        </mrow>
                    </mfrac>
                </mrow>
            </math>
        </p>
    </div>
</body>
</html>

如果在本地查看，则必须将其保存为 .xhtml，而不仅仅是 .html，这让我有点困惑。当然，这与数学相关，而不是字体，所以如果您尝试完整使用此代码，这只是一个注释。

这里有一份不错的字体列表，您可以（合法）嵌入到您的文档中。

Typekit 还提供了一种巧妙的方式来嵌入需要与字体铸造厂达成许可协议的字体。他们目前提供免费使用一种字体（您选择的）的功能。

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

Here's a sample page I was playing around with recently to view math formulas in Firefox. The part you are (likely) most interested in is the css @font-face declaration at the top, and the style="font-family: DejaVu Serif Web;" assigned to the <div> and <math> tags.

<?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">−<!-- − --></mo>
                            <mi>b</mi>
                            <mo>±<!-- ± --></mo>
                            <msqrt>
                                <msup>
                                    <mi>b</mi>
                                    <mn>2</mn>
                                </msup>
                                <mo>−<!-- − --></mo>
                                <mn>4</mn>
                                <mo>⁢<!-- ⁢ --></mo>
                                <mi>a</mi>
                                <mo>⁢<!-- ⁢ --></mo>
                                <mi>c</mi>
                            </msqrt>
                        </mrow>
                        <mrow>
                            <mn>2</mn>
                            <mo>⁢<!-- ⁢ --></mo>
                            <mi>a</mi>
                        </mrow>
                    </mfrac>
                </mrow>
            </math>
        </p>
    </div>
</body>
</html>

If viewing locally, it has to be saved as .xhtml, not just .html, which got me for a bit. This is, of course, related to the math-y stuff, not the font-face, so it's only a note if you're trying to use this code whole.

There's a decent list of fonts you can (legally) embed in your document here.

Typekit also provides a nifty way to embed fonts that do require licensing deals with type foundries. They currently offer the ability to use one font (of your choice) for free.

Font linking has been in browsers for quite some time; the issue was with what format you could use. Microsoft, of course, supported a proprietary font format, and Mozilla did not. sigh

回复收藏 0 原文