将自定义字体加载到网站中[重复]

Posted 2023-03-15

【中文标题】将自定义字体加载到网站中[重复]

【英文标题】：Loading custom fonts into the website [duplicate]

【发布时间】：2015-07-29 11:57:30

【问题描述】：

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

【问题讨论】：

创建网络字体并将文件保存在您的服务器中。

你能用谷歌字体吗...

【参考方案1】：

使用 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 */

【讨论】：

这个解决方案对你有用，你可以接受答案。

【参考方案2】：

使用 Google 字体

这里是link。

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

1.选择要使用的字体并选择其样式

在这里，我将使用Open Sans。

2。创建指向页面的 CSS 链接

然后，google 将生成它的链接以供使用。示例：

<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 字体非常简单。请务必使用quick use 按钮来了解我的意思。

【参考方案3】：

您正在寻找网络字体。使用这样的 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，但您可能希望在这样做之前检查托管您自己的字体的合法性。