自定义网页字体 - 跨浏览器支持

引言

正如标题所述，我们将构建一个跨浏览器支持的网络自定义字体解决方案。 让我们从这些简单的步骤开始。

背景

我一直在寻找在网络上使用自定义字体的方法，因为可用于网络的字体列表只有一小部分。 我为一个客户工作，他们要求使用通常仅适用于桌面，而默认情况下在网络上不可用的非常创新的字体。 因此，我决定寻找一种解决方法。 好吧，这就是它，我们也可以在网络中使用自定义网络字体！

第一步：获取您的字体

• 网络上有许多网站提供各种字体。 当然，其中一些字体在商业用途上需要付费，但仍然有很多字体可以免费使用。 FontSquirrel.com 是一个不错的字体提供商。
• 请查看下表

  字体格式	Mozilla 系列	Google Chrome	Opera	Internet Explorer	Safari
  .tff	3.5	2.0	10	否	3.1
  .otf	3.5	否	10	否	3.1
  .eot	否	否	否	4	否
  .svg	否	v. 0.3	9.0	否	3.1

• 确保您拥有所有相关浏览器所需的字体格式。 如果我们缺少任何必需的格式，FontSquirrel.com 具有一个名为 Web Font Generator 的工具，可以将 TFF 转换为所有其他格式。

(参考：http://www.fontsquirrel.com/tools/webfont-generator)

第二步：创建 CSS

• 有一种 CSS 语法称为 Paul Irish 的防弹 @font-face 语法，我们将使用该语法。

  (参考：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/)

• 其他人员也对该语法进行了调整，现在我们可以在 CSS 中如下使用它

  @font-face {
  font-family: 'report1942';
  src: url(Fonts/1942-webfont.eot); /* IE9 Compat Modes */
  src: url(Fonts/1942-webfont.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
  url(Fonts/1942-webfont.woff) format('woff'), /* Modern Browsers */
  url(Fonts/1942-webfont.ttf) format('truetype'), /* Safari, Android, iOS */
  url(Fonts/1942-webfont.svg#1942_report1942_report) format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
  }

• 现在我们可以在标记中使用该字体，如下所示

  font-family:'report1942';

浏览器兼容性

在 Firefox、Chrome、Opera、Safari、IE 11、IE7 以及 IE 6-10（IE 11 的兼容模式）上进行了测试。 我希望它也能在 Windows Phone、Android 和 iOS 上得到支持。

我希望您今天能学到一些新东西，并且希望您喜欢它。 感谢您的阅读。

历史

• v1.0：第一次尝试