如果 CSS 中确实存在该字体，我该如何使用该字体

Question

我想使用一些 Google 字体，但我知道有些国家/地区会阻止任何 Google 元素（我尝试在某些海外国家/地区登录一些使用 Google 字体的网站其中 Google 被垃圾邮件导致网站加载缓慢，最后浏览器显示无法访问该网站）

所以我的问题是，如果 <head\> 中的 <link href="sth.google.com" ...\> 可以正常使用，但如果用户尝试从某些国家访问我的网站，我提到他们可以选择 "disabled" 那 link （可能访问者在到达我的主页之前点击了我网站上的一些按钮然后 <link \> 可以被自动注释掉并使用默认字体显示我网站上的元素）。

Answer 1

您可以将 Google 中的字体下载到一个字体文件夹中，该文件夹将放在站点的 .root 目录中，然后 link 直接将字体下载到该文件夹中。您还可以在该字体后加一个逗号并指定默认字体，例如：字体系列："Lato"、无衬线字体；

Answer 2

Web Font Loader 在通过@font-face 使用链接字体时为您提供更多控制。它提供了一个通用接口来加载字体，无论来源如何，然后添加一组标准事件，您可以使用它来控制加载体验

https://github.com/typekit/webfontloader#timeouts

在这种情况下不要使用 webfont.js google cdn :) 使用你自己的

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>

//this block is non necessary if you want to   
//override default timeout use this #####################
    WebFontConfig = {
        google: {
            families: ['Lobster','Droid Serif']
        },
        timeout: 5000 // Set the timeout to two seconds
    };
//########################################################

    WebFont.load({
        google: {
            families: ['Lobster', 'Droid Serif']
        }
    });
</script>

<p style="font-family:'Lobster'; font-size: 60px">asdasdasd</p>
<p style="font-size: 60px">asdasdasd</p>

如果 CSS 中确实存在该字体，我该如何使用该字体

How do I use the font if it does exist in CSS

html

css

fonts