html - 我的字体不适用于所有设备

Question

我试图让 Source Sans Pro 字体在我的网站上在本身没有字体的设备上工作。我过去遇到过这个问题，但从未真正深入了解它。

这是我的网站(免责声明:我不是设计师): http://www.nickysfolders.com/?SessionThemeID=34#

我有... 1. 将字体放在我称之为字体的样式表上

@font-face
{
 font-family: 'Source Sans Pro', Comic Sans MS;
 src: url('SourceSansPro-Regular.ttf');
}

1. 调用字体

   .footer-text{
    font-family: 'Source Sans Pro';
    color: #636466;
    font-size: 14px;
    font-weight: 400;
    }
   

2. 我已经下载了所有字体 .ttf 文件并将其放在服务器上 font-face 可以访问它们的位置，直接放在相同 css 文件夹中

我预计这会在我测试过的所有计算机上运行，​​但事实并非如此。相反，它退回到 times new roman 或 sans serif？这就是我制作后备漫画 sans 的原因，所以我知道，如果它实际上首先访问它。显然不是？

感谢您的宝贵时间。如果我需要提供任何其他详细信息，请告诉我。

Answer 1

或者，您可以使用 <link> 导入HTML 中的标记...

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

或者这个 CSS 导入...

<style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
</style>

您可以在 Google Fonts 上自定义您想使用的变体.

从 Google 或您自己的服务器链接或嵌入字体文件后，font-family: 'Source Sans Pro', sans-serif;应该工作得很好。