如何添加一些非标准的字体，一个网站吗？

StackOverflow https://stackoverflow.com/questions/107936

  •  01-07-2019
  •  | 
  •  

题

有没有办法增加一些定义的字体在网站上，而不使用图片， 快闪 或者一些其他图形？

例如，我正在一些婚礼的网站，和我找到了很多好的字体为这一问题，但是我不能找到合适的方式来增加，上的字体服务器，和如何包括的字体CSS入HTML?这是可能做到的，没有图形？

有帮助吗？

解决方案

这可以通过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）。

其他提示

您可以通过 Google网络字体添加一些字体。

从技术上讲，字体是在Google上托管的，您可以在HTML标题中链接它们。然后，您可以使用 @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字体目录中的字体数量并不多。

要走的路是用@字体面CSS宣言》，它允许提交人指定的在线字体字显示的案文在其网页上。通过允许提交人提供他们自己的字体，@字体面消除了需要依赖于数量有限的字体用户必须安装在他们的计算机。

看一看以下表：

enter image description here

正如你可以看到，有几个格式，你需要知道关于主要是由于截浏览器的兼容性。该方案在移动设备是不是有太大的不同。

方案：

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-大多数的浏览器

事情 转移大量朝着头疼的事情 虽然,所以你可能可以逃脱:

@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-只有最新的浏览器

甚至只是头疼的事情.
然后，使用这样的：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

参考文献和进一步阅读：

这主要是您需要知道的关于执行这一功能。如果你想要研究更多的关于这个问题，我将鼓励采取一种看看下面的资源。大多数什么我把在这里提取下

如果使用非标准字体，则表示标准格式的自定义字体，这是我的工作方式，它适用于我目前检查过的所有浏览器：

@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字体。在线提供的一些工具可以进行转换。

但是如果你想以非标准格式（位图等）附加字体，我无法帮助你。

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

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

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

编辑:(我仍然建议将图像用于非标准字体，因为sIFR会增加项目时间并需要维护）。

文章 IE中的字体：使Web字体工作 表示它适用于所有三种主流浏览器。

以下是我工作的示例： http://brendanjerwin.com/test_font.html

更多讨论在 嵌入字体

Typeface.js 和 Cufon 是另外两个有趣的选择。它们是JavaScript组件，以JSON格式呈现特殊字体数据（您可以从 TrueType 转换或通过新的<！> lt; canvas <！> gt OpenType 格式在他们的网站上） ;所有较新浏览器中的元素，除了Internet <！>资源管理器，并通过Internet中的 VML <！ > NBSP;资源管理器

。

两者（截至目前）的主要问题是选择文本不起作用或至少只是非常笨拙。

不过，对于头条新闻来说，这是非常好的。正文...我不知道。

而且速度惊人。

或者您可以尝试 sIFR 。我知道它使用Flash，但仅限于可用。如果Flash不可用，它将以原始（CSS）字体显示原始文本。

  

有没有办法在网站上添加一些自定义字体而不使用... Flash？

当然，请使用 Silverlight 。

W3C建议使用的技术称为<！>“embedding <！> quot;这里的三篇文章很好地描述了这些文章：嵌入字体。在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得了有限的成功。

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];

然后使用该字体绘制到Graphics。

它看起来只适用于Internet Explorer，但是快速Google搜索<！>“html嵌入字体<！>”;产生 http://www.spoono.com/html/tutorials/tutorial .PHP？ID = 19个

如果你想保持与平台无关（你应该！）你将不得不使用图像，或者只是使用标准字体。

我做了一些研究并挖出了 动态文本替换 （2004-06-15发表）。

此技术使用图像，但它似乎是<！>“免提<！>”。您编写了自己的文本，并且让一些自动脚本在运行时为您自动在页面上进行查找和替换。

它有一些限制，但它可能是比我见过的所有其他更容易的选择（和更多浏览器兼容）。

也可以使用WOFF字体 - 例如此处 

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

只需提供这样的实际字体链接，您就可以了

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

Typeface.js JavaScript方式：

  

使用typeface.js，您可以嵌入自定义   您的网页中的字体，所以你不这样做   必须将文字渲染到图像

     

而不是创建图像或使用   flash只是为了显示您网站的图片   您想要的字体中的文字，您可以使用   typeface.js并用纯HTML编写   和CSS，就像你的访客一样   本地安装的字体。

http://typeface.neocracy.org/

Monotype最近发布了很多字体以及在网页上使用它们的新系统： http ：//www.webfonts.fonts.com/

参见文章 50有用用于美丽网页排版的设计工具 用于替代方法。

我只使用了 Cufon 。我发现它可靠且易于使用，所以我坚持使用它。

如果您有自己的字体文件，则需要为其他浏览器添加该字体的更多格式。

为此我使用字体生成器，如 Fontsquirrel ，它提供所有字体格式< ！>放大器;它的@ font-face CSS，你只需要拖动<！> amp;将其放入CSS文件中。

在这种情况下，我担心图形是你唯一的选择。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top