将自定义字体加载到网站中

Question

任何人帮助我，我在我的网站项目中使用特定字体。匿名用户不知道如何下载，安装和这些字体，如果字体没有安装，那么网站看起来不错。有什么办法，或一些中央网站的字体可以上传和共享特定字体使用。像bootstrap，jquery一样，提供libs来使用它。

Answer 1

您正在寻找网络字体。使用这样的CSS，您可以告诉浏览器从URL下载字体并在页面上使用它们：

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

^{来源：@fencepost's answer to How to embed fonts in HTML? on SO}

Google Fonts是托管字体文件的服务示例。 Typekit是另一个。

您可以自己动手，但是您需要将文件转换为所有必要的格式以确保兼容性。 IANAL，但您可能希望在执行此操作之前检查托管自己字体的合法性。

Answer 2

使用CSS3功能，您可以使用自定义字体。您只需要在服务器上上传字体并在css代码中定义路径。

很少有字体需要不同的格式类型才能在不同的操作系统上运行。因此您可以使用online font converter创建所有字体类型格式。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 3

使用Google字体

这是link。

如何使用它？查找quick use按钮。

<强> 1。选择要使用的字体并选择其样式

在这里，我将使用Open Sans。

<强> 2。创建CSS链接到页面

然后，谷歌将生成其使用链接。例如：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>'

在你的页面中使用它。

第3。将规则添加到CSS脚本

在你的css脚本上，添加：

font-family: 'Open Sans', sans-serif;

实际上，Google Font非常简单。请务必使用quick use按钮查看我的意思。