下载collection字体时如何实现google字体？

Question

我想使用两种 google 字体，但我担心以这种方式添加：

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

（在性能上）可能比 collection...

中的下载字体慢

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

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

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

但我不知道我必须在路径中 link 什么文件...例如，当我在 collection 中下载 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

...你看怎么做到的

您 link 来自 CSS 文件的字体文件 - 而不是来自 link 元素。

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 文件中从外部引用它。

下载collection字体时如何实现google字体？

How implement google fonts when download the font in collection?

css

fonts

webfonts

google-font-api

google-webfonts