如何添加一些非标准字体的网站?

有没有一种方法可以在网站上添加一些自定义字体，而不使用图像，Flash或其他图形?

例如，我在一个婚礼网站上工作，我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像，这可能吗?

或者你可以试试sIFR。我知道它使用Flash，但只有在可用的情况下。如果Flash不可用，它将以原始(CSS)字体显示原始文本。

2008-09-20 11:33:07

我发现在网站上使用非标准字体最简单的方法是使用sIFR

它确实涉及到包含字体的Flash对象的使用，但如果没有安装Flash，它会很好地降级为标准文本/字体。

样式在CSS中设置，JavaScript为文本设置Flash替换。

编辑:(我仍然建议使用非标准字体的图像，因为sIFR会增加项目的时间，并且可能需要维护)。

2008-09-20 11:35:01

这可以通过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)，所有常规浏览器都支持它。

2008-09-20 11:35:52

它看起来只适用于ie浏览器，但是在谷歌上快速搜索“html嵌入字体”会得到http://www.spoono.com/html/tutorials/tutorial.php?id=19

如果你想保持平台无关性(你应该!)，你就必须使用图像，或者使用标准字体。

2008-09-20 11:39:12

W3C为此推荐的技术称为“嵌入”，这里有三篇文章对其进行了详细描述:嵌入字体。在我有限的实验中，我发现这个过程容易出错，而且在多浏览器环境中使用它的成功程度有限。

2008-09-20 11:39:19

Safari和Internet Explorer都支持CSS @font-face规则，但是它们支持两种不同的嵌入式字体类型。Firefox计划在不久的将来支持与Apple相同的类型。SVG可以嵌入字体，但还没有得到广泛支持(没有插件)。

我认为我所见过的最可移植的解决方案是使用JavaScript函数将标题等替换为生成的图像，并使用你所选择的字体缓存在服务器上——这样你就可以简单地更新文本，而不必在Photoshop中进行处理。

2008-09-20 11:43:39

如果您使用ASP。NET，它很容易生成基于图像的字体，而不需要在服务器上安装(如添加到已安装的字体库)字体，通过使用:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

然后用这种字体在图形上绘图。

2008-09-20 11:47:23

我做了一些研究，找到了动态文本替换(发布于2004-06-15)。

这项技术使用图像，但它似乎是“解放双手”。您编写文本，然后让一些自动脚本在页面上自动执行查找和替换操作。

它有一些限制，但它可能是我所见过的最简单的选择之一(而且更兼容浏览器)。

2008-09-20 11:52:07

《IE中的字体面:让Web字体正常工作》一文中说，它适用于所有三种主要浏览器。

这是我得到的一个工作样本:http://brendanjerwin.com/test_font.html

更多的讨论在嵌入字体中。

2009-02-25 22:56:00

字体.js和Cufon是另外两个有趣的选项。它们是JavaScript组件，通过除Internet Explorer以外的所有新浏览器中的<canvas>元素和Internet Explorer中的VML以JSON格式呈现特殊字体数据(您可以在其网站上从TrueType或OpenType格式转换)。

两者的主要问题(到目前为止)都是选择文本不工作，或者至少工作起来相当笨拙。

尽管如此，它还是很适合做头条新闻。正文……我不知道。

而且速度惊人。

2009-05-11 16:59:25

请参阅文章《美丽网页排版的50个有用的设计工具》以获得其他方法。

我只用过Cufon。我发现它很可靠，很容易使用，所以我一直用它。

2010-04-06 05:06:59

JavaScript方式:

使用字体.js你可以嵌入自定义你的网页字体，这样你就不会必须将文本渲染为图像而不是创造图像或使用 Flash只是为了显示你的网站的图形文本用你想要的字体，你可以使用用纯HTML编写和CSS，就像你的访问者一样字体在本地安装。

http://typeface.neocracy.org/

2010-05-31 03:35:45

您可以通过谷歌Web字体添加一些字体。

从技术上讲，字体驻留在谷歌，您可以将它们链接到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也用它作为文章标题)。然而，目前谷歌字体目录中可用的字体并不多。

2010-06-28 07:08:22

如果你说的非标准字体，你指的是标准格式的自定义字体，下面是我怎么做的，它适用于我目前为止检查过的所有浏览器:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

所以你只需要TTF和eot字体。网上的一些工具可以进行转换。

但如果你想附加非标准格式的字体(位图等)，我不能帮助你。

2012-09-12 15:30:55

也可以使用WOFF字体-例如这里

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

2014-02-22 19:18:24

方法是使用@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开发者网络

2014-03-30 01:00:32

如果您有一个字体文件，那么您将需要为其他浏览器添加该字体的更多格式。

出于这个目的，我使用Fontsquirrel这样的字体生成器，它提供了所有的字体格式和它的@font-face CSS，你只需要将它拖放到你的CSS文件中。

2016-02-11 05:37:36

只需简单地提供链接到实际的字体像这样，你就会很好

<!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>

2017-11-11 16:11:09

@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");
}

2020-09-29 23:57:15

简单的解决方法是在CSS中使用@fontface

@font-face {
font-family: myFirstFont;
src: url(fileLocation);} 

div{
    font-family: myfirstfont;}

2022-04-15 05:01:17

您可以使用@import url(url)导入web字体。您必须将url替换为字体源(完整的web源)。

2022-11-04 13:03:36

如何添加一些非标准字体的网站?

推荐文章

最新文章

标签