如何在网站上添加一些非标准字体?
有没有一种方法可以在网站上添加一些自定义字体而不使用图像,Flash或者其他图形?
例如,我在某个婚礼网站上工作,并且在该主题上找到了很多不错的字体,但是我找不到在服务器上添加该字体的正确方法,以及如何在CSS中包含该字体。进入HTML?没有图形就可以做到吗?
解决方案
恐怕在这种情况下,图形是我们唯一的选择。
或者,我们可以尝试sIFR。我知道它使用Flash,但仅在可用时使用。如果没有Flash,它将以其原始(CSS)字体显示原始文本。
我发现在网站上使用非标准字体的最简单方法是使用sIFR
它确实涉及使用包含字体的Flash对象,但是如果未安装Flash,它会很好地降级为标准文本/字体。
样式是在CSS中设置的,JavaScript会为文本设置Flash替换。
编辑:(我仍然建议将图像用于非标准字体,因为sIFR会增加项目时间,并且可能需要维护)。
这可以通过CSS完成:
<style type="text/css"> @font-face { font-family: "My Custom Font"; src: url(http://www.example.org/mycustomfont.ttf) format("truetype"); } p.customfont { font-family: "My Custom Font", Verdana, Tahoma; } </style> <p class="customfont">Hello world!</p>
如果我们使用TrueType字体(TTF)或者Web开放字体格式(WOFF),则所有常规浏览器均支持该功能。
看起来它只能在Internet Explorer中使用,但是Google快速搜索" html embed fonts"会产生http://www.spoono.com/html/tutorials/tutorial.php?id=19
如果要保持平台无关性(并且应该!),则必须使用图像,否则仅使用标准字体。
W3C为此推荐的技术称为"嵌入",并且在这里的三篇文章中都有很好的描述:嵌入字体。在有限的实验中,我发现此过程容易出错,并且使其在多浏览器环境中运行的成功有限。
Is there a way to add some custom font on website without using ... Flash ?
当然,请使用Silverlight。
Safari和Internet Explorer都支持CSS @ font-face规则,但是它们支持两种不同的嵌入式字体类型。 Firefox计划不久后支持与Apple相同的类型。 SVG可以嵌入字体,但尚未得到广泛支持(没有插件)。
我认为我见过的最便携的解决方案是使用JavaScript函数替换标题等,并使用我们选择的字体在服务器上生成并缓存的图像-这样,我们只需更新文本即可而不必在Photoshop中。
如果使用ASP.NET,则生成基于图像的字体非常容易,而无需实际使用以下方法在服务器上安装(如添加到已安装的字体库中)字体:
PrivateFontCollection pfont = new PrivateFontCollection(); pfont.AddFontFile(filename); FontFamily ff = pfont.Families[0];
然后以该字体绘制到"图形"上。
我做了一些研究,并研究了"动态文本替换"(发布于2004-06-15)。
该技术使用图像,但似乎是"免提"的。我们编写文本,然后让一些自动化脚本在页面上为我们即时进行自动查找和替换。
它有一些局限性,但它可能是我所见过的所有其他选择中较容易的选择之一(并且与浏览器更兼容)。
IE中的"字体显示:使Web字体可用"一文说,它可与所有三种主要浏览器一起使用。
这是我正在工作的示例:http://brendanjerwin.com/test_font.html
嵌入字体中有更多讨论。
Typeface.js和Cufon是另外两个有趣的选项。它们是JavaScript组件,它们通过除InternetExplorer以外的所有较新浏览器中的new <canvas>元素和InternetExplorer中的VML,以JSON格式(可以从其网站上的TrueType或者OpenType格式转换为特殊字体数据)来呈现特殊字体数据。
两者的主要问题(到现在为止)是选择文本不起作用,或者至少只能非常笨拙地起作用。
尽管如此,对于头条新闻还是很好的。正文...我不知道。
而且速度惊人。
有关替代方法,请参见文章50个有用的漂亮Web版式设计工具。
我只用过Cufon。我发现它可靠且非常易于使用,因此我坚持使用它。
Typeface.js JavaScript方式:
With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
http://typeface.neocracy.org/
Monotype最近发布了许多字体以及在网页上使用它们的新系统:http://www.webfonts.fonts.com/
我们可以通过Google网络字体添加一些字体。
从技术上讲,这些字体托管在Google上,我们可以在HTML标头中链接它们。然后,我们可以在CSS中使用@ font-face`来自由使用它们(了解有关内容)。
例如:
在<head>部分中:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
然后在CSS中:
h1 { font-family: 'Droid Sans', arial, serif; }
该解决方案似乎非常可靠(即使《 Smashing Magazine》也将其用作文章标题。)。但是,到目前为止,Google字体目录中没有可用的字体太多。