Javascript 如何在未安装在客户端计算机但安装在服务器计算机上的网站中显示字体

我见过许多网站使用不同的字体，这些字体不在我的电脑中，但它们显示在我的浏览器中。这些页面的源代码包括以下脚本：

---

这个脚本是什么？使用这种web字体安全吗？

是的，webfont loader非常安全……它只是webfonts的Javascript替代品，提供了比Google fonts API更多的字体加载控制。Web字体加载器还允许您使用多个Web字体提供程序

我仍然用老办法做这件事……：） 我在下面列出了

你会去哪里下载你想要的字体在谷歌。。。

然后你只需像这样把它添加到你的网站上…（我使用的字体示例是'Balthazar'）

然后在CSS中访问它，就像这样

font-family: 'Balthazar', serif;

---

你也可以使用字体技术。就像我在到处寻找贝巴斯Nueu的常规字体一样。我把它装上了字体。这样做： 下载字体脸工具包…示例（字体松鼠）——

将文件上载到网站的服务器

CSS

@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
     url('BebasNeue-webfont.woff') format('woff'),
     url('BebasNeue-webfont.ttf') format('truetype'),
     url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;

}

确保目录路径指向服务器上上载的文件

使用

字体系列：“BebasNeueRegular”要呈现字体的位置

希望这能有所帮助。
CSS规则让这一切得以实现。但是，有一些考虑因素：

由于并非所有浏览器都理解相同的字体格式，因此必须为字体指定不同的格式。大多数获得许可的前端都提供web版本，这是一个“组合”zip文件，包括不同格式的CSS和字体文件。您还可以通过上传字体文件生成“combo”文件

并非所有浏览器都能生成所有字体的粗体或斜体版本，因此使用提供粗体和斜体版本的字体是一个不错的选择

字体不会在所有浏览器和操作系统中呈现完全相同的效果。您会发现一些细微的差异，特别是在抗锯齿、字母宽度和阴影效果方面

如果您想要完美呈现字体（类似photoshop），则不能使用字体面。您必须使用一种更复杂的方法，称为，这是一种基于javascript的字体呈现方法，比字体脸方法（IMHO）复杂得多

这是一个示例代码：

@font-face {
  /*This loads the font file into a new font family value */
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9 */
}

DIV { font-family: myFirstFont; }

可能重复的
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
     url('BebasNeue-webfont.woff') format('woff'),
     url('BebasNeue-webfont.ttf') format('truetype'),
     url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;

@font-face {
  /*This loads the font file into a new font family value */
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9 */
}

DIV { font-family: myFirstFont; }