有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
有没有一种方法可以在网站上添加一些自定义字体,而不使用图像,Flash或其他图形?
例如,我在一个婚礼网站上工作,我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像,这可能吗?
当前回答
简单的解决方法是在CSS中使用@fontface
@font-face {
font-family: myFirstFont;
src: url(fileLocation);}
div{
font-family: myfirstfont;}
其他回答
只需简单地提供链接到实际的字体像这样,你就会很好
<!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格式转换)。
两者的主要问题(到目前为止)都是选择文本不工作,或者至少工作起来相当笨拙。
尽管如此,它还是很适合做头条新闻。正文……我不知道。
而且速度惊人。
我做了一些研究,找到了动态文本替换(发布于2004-06-15)。
这项技术使用图像,但它似乎是“解放双手”。您编写文本,然后让一些自动脚本在页面上自动执行查找和替换操作。
它有一些限制,但它可能是我所见过的最简单的选择之一(而且更兼容浏览器)。
这可以通过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-Fonts (TTF), Web Open Font Format (WOFF)或Embedded Opentype (EOT),所有常规浏览器都支持它。
@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");
}