网页中的非标准字体?
我最近遇到了一个使用字体“ff-tisa-web-pro-1” (在他们的CSS文件中指定) 的网页 。
这是如何工作的? 我绝对没有这个字体在我的电脑上,但它显示。
您可以使用CSS将字体embedded到网页中。
想要摆脱一些有吸引力的标题“Web安全”的字体,并做到这一点,而不使用图像? 使用CSS 3并embedded字体!
正如Simon指出的那样,CSS @ font-face声明可用于在您的站点上实现传统的非Web安全字体。 如果你想自己试试,一定要看看Paul Irish现在着名的防弹字体的实现 ,它链接到FontSquirrel的字体文件生成器 。 现在支持跨浏览器的正确实现,尽pipe大多数字体需要处理许可,而一致的呈现仍然是一个问题。
您询问的网站使用的是Typekit ,这是一些将为您提供字体文件(收费)的新服务之一,并为您提供了一个简单的实现,它掩盖了@ font-face的复杂性。 谷歌的Font API是相似的,虽然它是免费的,只有主机/提供一小部分免费字体。
另外,用于embedded字体的非本地替代技术已经存在了一段时间(尽pipe它们不会在CSS中指示),请参阅cufon和sIFR 。
这是我最近玩的一个示例页面,用来查看Firefox中的math公式。 您最感兴趣的部分是顶部的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">−<!-- − --></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,这让我有点。 当然,这与math相关,而不是字体,所以如果你试图使用这个代码,这只是一个注意事项。
这里有一个合适的字体列表,你可以在这里embedded你的文档。
Typekit还提供了一种巧妙的方法来embedded需要与types代工厂签订许可协议的字体。 他们目前提供免费使用一种字体(您所select的)的能力。
字体链接在浏览器中已经有相当长的一段时间了。 问题是你可以使用什么格式。 当然,微软支持专有字体格式,而Mozilla则没有。 叹
谷歌字体目录是一个有趣的资源,用于了解networking字体的移动方向:
谷歌最近发布的Font API ,它可能对你有一些用处。