有没有一种方法可以在网站上添加一些自定义字体，而不使用图像，Flash或其他图形?
例如，我在一个婚礼网站上工作，我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像，这可能吗?
当前回答
只需简单地提供链接到实际的字体像这样，你就会很好
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
其他回答
字体.js和Cufon是另外两个有趣的选项。它们是JavaScript组件，通过除Internet Explorer以外的所有新浏览器中的<canvas>元素和Internet Explorer中的VML以JSON格式呈现特殊字体数据(您可以在其网站上从TrueType或OpenType格式转换)。
两者的主要问题(到目前为止)都是选择文本不工作，或者至少工作起来相当笨拙。
尽管如此，它还是很适合做头条新闻。正文……我不知道。
而且速度惊人。
方法是使用@font-face CSS声明，它允许作者指定在线字体来在他们的网页上显示文本。通过允许作者提供自己的字体，@font-face消除了依赖用户在其计算机上安装的有限数量的字体的需要。
看看下面的表格:
如您所见，由于跨浏览器兼容性，有几种格式需要了解。移动设备的情况也差不多。
解决方案:
1 -完全的浏览器兼容性
这是目前可能得到最深支持的方法:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 -大部分浏览器
事情正在向WOFF方向转变，所以你可能会逃避:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 -只能使用最新的浏览器
甚至只是WOFF。 然后你可以这样使用它:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
参考文献和进一步阅读:
这就是实现此特性需要了解的主要内容。如果你想进一步研究这个主题，我建议你看看下面的资源。我在这里写的大部分内容都是从下面摘录出来的
使用字体面(非常推荐) 防弹@字体-面语法 我可以使用@font-face网页字体吗? 如何存档跨浏览器@字体面支持 @font-face在CSS Mozilla开发者网络
@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}
W3C为此推荐的技术称为“嵌入”，这里有三篇文章对其进行了详细描述:嵌入字体。在我有限的实验中，我发现这个过程容易出错，而且在多浏览器环境中使用它的成功程度有限。
我做了一些研究，找到了动态文本替换(发布于2004-06-15)。
这项技术使用图像，但它似乎是“解放双手”。您编写文本，然后让一些自动脚本在页面上自动执行查找和替换操作。
它有一些限制，但它可能是我所见过的最简单的选择之一(而且更兼容浏览器)。
