Fontface jQuery插件

钥匙要点

• > Fontface jQuery插件简化了在网站上使用自定义字体的过程，从而仅通过加载必要的字体文件来确保跨浏览器的兼容性和更快的加载时间。
>
• >插件支持 @font-face规则支持的所有字体文件类型，包括trueType字体（TTF），Web Open Font Fort格式（WOFF）和可扩展的向量图形图形字体（SVG），并且可以与内容管理系统（CMS）（CMS）。
>要使用fontface jQuery插件，需要从官方网站下载插件文件，将其包括在项目中，然后使用jQuery语法调用插件并指定字体，包括服务器上字体文件的路径。>
• >
>

从战trench的安全性中，浏览器战争仍在进行。战争最艰难的战线之一是 @font-face。 您习惯于需要专有扩展名来使用新的CSS3属性 - 我们可以处理。不过，即使是坚强的退伍军人，也发现成功实现 @font-face需要多少浏览器特定代码为自己准备。是时候准备自己了！ 准备好？

@font-face {
  font-family: "BestFontEver";
  src: url('file/path/filename.eot');
  src: local('☺'), url('file/path/filename.woff') format('woff'), url('file/path/filename.ttf') format('truetype'), url('file/path/filename.svg#BestFontEver') format('svg');
}

即使这样，也没有设定任何元素来使用您的新bestfontever字体；它只是注册您要使用它的内容，并请求新字体的浏览器源。 好消息是，一旦注册，该字体就可以按照我们一直使用的字体家庭使用方式使用。假设我们有一个sans-serif字体：

#element, .elements {
  font-family: "BestFontEver", Helvetica, Arial, sans-serif;
}

那么，注册时为什么有这么多选择？

盘点战斗人员

• .EOT（或嵌入式Opentype）字体文件是Microsoft的部队，因此，如果您希望BestFontever出现在Internet Explorer中，则需要.Eot版本。
> Web开放字体格式或.Woff是冲突中最新的士兵。它是由Mozilla开发的，并得到Firefox，Chrome，Opera和IE9。
• 接下来是苹果在1980年代后期开发的.ttf扩展名的TrueType字体。这些字体得到了Safari，Opera，Firefox和Chrome 的支持 SVG格式？那是针对像您的iOS设备一样包含SVG的平台：iPhone，iPad和其他运行移动Safari的其他任何东西。
• 和最后一个SRC条目？本地（'☺'）？如果您正在查看您的页面的用户已经安装了一个名为BestFontever的字体。它通过不加载其本地字体来保护您的最佳Fontever字体。这项技术是由保罗·爱尔兰人（Paul Irish）开发的，因此您可以查看他关于为什么这是个好主意的解释。

你的超级士兵

那它留在哪里？战线是绘制的，但战争的雾气不会很快举起。您想要的是一种将 @font-face采购字体快速轻松地到达页面的方法。 那就是JQuery进来的地方！当我们坐在总部，等待浏览器对其进行战斗时，我们可以使用插件成为我们的步兵。然后，我们需要做的就是提供jquery.css（） - 样式对象。 Fontface jQuery插件 是将字体应用于您无法控制的站点的一种好方法，以快速原型字体在设计过程中的外观，以使经验较低的开发人员更大的控制器控制，甚至为您的生产准备就绪页面进行更大的控制。

@font-face {
  font-family: "BestFontEver";
  src: url('file/path/filename.eot');
  src: local('☺'), url('file/path/filename.woff') format('woff'), url('file/path/filename.ttf') format('truetype'), url('file/path/filename.svg#BestFontEver') format('svg');
}

就是这样，这就是长版本！对插件进行了稍作调整后，我们可以将要求减少到以下方式：

#element, .elements {
  font-family: "BestFontEver", Helvetica, Arial, sans-serif;
}

您可以相当安全地删除Fontfamily细节，并且仍然决定堆栈这样：

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontFamily : ["Best Font Ever", "BestFontEver", "Helvetica, Arial, sans-serif"],
  filePath : "/_fonts/",
  fileName : "bestfontever-regular-webfont"
});

为了消除提供FilePath详细信息的需求，我们只是在插件中设置了默认值。在插件代码中查找默认对象：

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fileName : "bestfontever-regular-webfont"
});

您仍然可以提供所需的任何一次性文件膜，但是在插件中将其设置为Fire and Forget。 不过，更好的是，如果您的字体具有不同的权重或样式，则可以使用这些字体：

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontStack : "Helvetica, Verdana, Arial, sans-serif",
  fileName : "bestfontever-regular-webfont"
});

抓住插件，自己尝试！ 您可以在http://code.google.com/webfonts/（用于truetype fonts），http://webfonts.info，http://wwwwwwwww.fontsquirrel.com/和htttttp：/http： 最后一个提示？如果您相当确定您的大部分受众会安装您的字体，则可以在字体堆栈中使用其通常的名称来加载其本地版本。实际上，这是我们在第一个示例中所做的。在您的字体stack>之前，使用接受的名称（有史以来最best的字体），您将其与 @font-face加载版本（bestfontever）相关联的名称，即表示我们默认使用本地版本（如果可用）。如果没有安装，我们将沿堆栈进行进步，直到有东西粘住，希望这是我们的 @font-face。 我们在你身边

战争很糟糕，但是有了JQuery的 @font-Face插件，您将在不知不觉中赢得战争！

>有关Fontface jQuery插件的常见问题

> Fontface jQuery插件是什么，它如何工作？

> Fontface jQuery插件是一种功能强大的工具，可让Web开发人员轻松地在其网站上实现自定义字体。它可以通过从服务器加载字体文件并使用CSS将其嵌入到您的网站中来起作用。该插件使用 @font-FACE规则，这是CSS功能，可让您指定在线字体上可以在网页上显示文本。使用Fontface jQuery插件时，您可以确保所选字体将正确显示在支持 @font-face规则的所有浏览器上。

>

>如何安装fontface jQuery插件？>

使用Fontface jQuery插件有什么好处？它简化了使用自定义字体的过程，从而节省了时间和精力。它还确保跨浏览器兼容性，这意味着您所选的字体将正确显示在支持 @font-face规则的所有浏览器上。该插件还允许加载时间更快，因为它仅加载了必要的字体文件。

>我可以使用带有Fontface jQuery插件的多个自定义字体？

是的，您可以使用Fontface jquery jquery插件使用多个自定义字体。您只需要为要使用的每个字体调用插件，为每个字体指定每个字体文件。这使您可以在网站上使用不同的自定义字体。

>

我可以将哪些类型的字体文件与fontface jQuery插件一起使用？

>我如何确保我的自定义字体迅速加载？

确保您的自定义字体快速加载，您应该快速加载Font Font Font。这可以通过使用压缩的字体文件格式（例如Woff）来完成。您还可以使用提供快速交付时间的字体托管服务。

>如果浏览器不支持 @font-face规则，会发生什么？

如果浏览器不支持 @font-face font-face规则，则将无法显示自定义字体。在这种情况下，浏览器将使用CSS字体堆栈中的下一个字体。

我可以将Fontface jQuery插件与内容管理系统（CMS）一起使用吗？

是的，您可以将Fontface jQuery jquery插件与CMS一起使用。您只需要在CMS中包含插件文件，然后在主题的CSS文件中调用插件。

>

>我如何对Fontface jQuery插件进行故障排除问题？

>

如果您在Fontface jQuery插件中遇到问题，则首先要查看已包含在项目中的插件文件中的插件。您还应检查字体文件的路径是否正确。如果您仍然遇到问题，则可以咨询插件的文档或向社区寻求帮助。

我可以将Fontface jQuery插件用于商业项目吗？

是的，您可以将Fontface jQuery插件用于商业项目。但是，您应始终检查所使用的字体的许可，以确保允许商业用途。

以上是Fontface jQuery插件的详细内容。更多信息请关注PHP中文网其他相关文章！