如何在集合中下载字体时实现谷歌字体？

Question

我想使用两种谷歌字体，但我担心的是这样添加：

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

可能比在集合中下载字体更慢（在性能上）......

所以我在集合中下载了两种字体，但我怀疑如何在我的网站上实现...

也许我只需要在css文件夹中插入两个集合，然后添加head

<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'> 

但我不知道我必须在路径中链接哪个文件...例如，当我在集合中下载PT Sans时，在这个文件夹中我有这些文件：

我希望你能帮我理解更多......

非常感谢，对不起我的英语

Answer 1

只需在css文件中调用您的字体。

@font-face {
    font-family: myFirstFont;
    src: url(font1.woff); /* specify the path of your font location*/
}

对下一个字体重复此操作。

 @font-face {
        font-family: myFirstFont;
        src: url(font2.woff); /* specify the path of your font location*/
    }

Answer 2

您确实需要更多字体文件。

如果您只是从Google服务器中打开文件...

https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic

......你知道它是如何完成的。

您可以链接CSS文件中的字体文件 - 而不是链接元素。

Answer 3

假设您希望从内部文件夹本地加载字体而不是外部源：

将以下内容添加到<style>代码中的代码中：

@font-face {
    font-family: 'PT_Sans';
    font-style: Regular;
    src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
    src: local('PT Sans'), local('PT_Sans'),
    url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')

}

或者您可以在CSS文件中外部引用它。