字体在 HTML 页面中未正确显示

Posted 2023-03-15

【中文标题】字体在 HTML 页面中未正确显示

【英文标题】：Font not showing properly in HTML page

【发布时间】：2015-12-13 04:13:28

【问题描述】：

我正在使用两种字体系列，1. “Open sans” 2. Colvetica 。我正面临这些字体的这种问题。

1) 我在 CSS 文件中使用像这样的“font-family: 'Open Sans';”这样的 open sans。它只适用于那些安装了 open sans 的计算机。但在移动设备中，这根本行不通。

2）对于 colvetica，我使用了它但没有工作。我不知道如何使用它。我使用 colvetica 字体文件但同样的问题。这个字体怎么用？

我需要 opensans 和 colvetica 在同一页面。像colvetica , 和

【问题讨论】：

没有字体当然不行。

请不要在您的帖子中添加“紧急”或类似内容 - 所有问题在这里都具有同等优先级。谢谢！

Import and use google webfont 的可能重复项

【参考方案1】：

您需要在网站中包含字体，以及指向在线 css 文件的链接

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

或者您可以使用 @font-face 将字体包含到网站中

【参考方案2】：

来自css-tricks.com

如何使用 css 托管和嵌入字体文件

<style>
@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 */

</style>

【讨论】：

补充@andrew 的答案：如果您只有 ttf 文件扩展名，您可以在此处生成所有字体：font-squirrel

这要求您在站点根目录中拥有实际的字体文件。

【参考方案3】：

您需要为他们提供一种下载字体的方法。

输入@import url('http://fonts.googleapis.com/css?family=Open+Sans') 在你的 CSS 的顶部。 this question by another user.

对此进行了介绍

【参考方案4】：

您需要通过 Google 字体或 @font-face 导入。

在 Google 字体中，您可以使用 html 或 CSS 导入：

在您的 HTML 上：

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

在您的 CSS 上：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

如果您在google.com/fonts 上找不到您的字体，您可以创建自己的字体套件：http://www.fontsquirrel.com/tools/webfont-generator（您可以生成所有内容，包括嵌入字体的 css 代码），因此并非所有字体都可以转换.在正确的 url 中查看路径