Google fonts and twitter bootstrap 3: 我应该在哪里加载字体，如何在css 文件中使用它？

Question

我正在尝试自定义基于 Bootstrap 3 的主题，但我在使用 Google 字体设置样式时遇到困难。

我想使用 Google 字体中的 Lora 字体，我的页面标题包含：

<head>
    <meta charset="utf8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- check meaning of these 
    <meta name="description" content="">
    <meta name="author" content="Luca Cerone" >
    <link rel="icon" href="../../favicon.ico">
    -->
    <title>site title</title>

    <!--- add google fonts here -->
    <!--- Google  fonts Lora -->
    <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />

    <!--- This is Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">   

    <!--- personal styles should always be below bootstrap -->
    <link rel="stylesheet" href="css/style.css">

</head>

在css/stlye.css开头我放置了：

* {
    -webkit-border-sizing: border-box;
    -moz-border-sizing: border-box;
    -ms-border-sizing: border-box;
    border-sizing: border-box;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 17px;
}

理想情况下，我希望所有页面都使用 Lora 字体。

但是，当我尝试在浏览器中加载页面并使用 chromium 开发人员工具进行检查时，出现了字体系列 stricken-out 并且在我看来使用的是衬线字体，而不是 Lora.

我做错了什么，我该如何解决？

Answer 1

在本地工作时，使用 http:// 而不是无协议 // Google 字体现在没有加载...

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />

Answer 2

尝试将字体添加到 html 和 body 标签，而不是像这样：

html, body {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 17px;
}

是的，在 google 字体 link 之前保留 http:。

此外，如果您的站点使用 SSL 证书 (https://yourdomain.com) then use https: for all internal as well as external links on your site but if your site does not use any SSL certificate (http://yourdomain.com)，则对您站点中的所有 link 使用 http。

Google fonts and twitter bootstrap 3: 我应该在哪里加载字体，如何在css 文件中使用它？

Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

html

css

fonts

google-font-api

twitter-bootstrap