Google 字体和 twitter 引导程序 3：我应该在哪里加载字体，以及如何在 css 文件中使用它？答案

【问题标题】：Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?Google 字体和 twitter 引导程序 3：我应该在哪里加载字体，以及如何在 css 文件中使用它？
【发布时间】：2015-03-23 23:02:13
【问题描述】：

我正在尝试自定义基于 Bootstrap 3 的主题，但我在使用 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 开发人员工具进行检查时，字体系列似乎被删除了，在我看来，使用的是衬线字体，而不是 Lora。

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

【问题讨论】：

其他属性，比如 font-size 或 font-weight 出现在后面？
我不确定..在 html { bootstrap.css 中定义的某些地方出现 font-family: "Helvetica" .. .in other 'Lora' is stricken out....跨度>
btw 字体改变大小，但对我来说它看起来不是 17px。我之所以选择它是因为这样的字体大小合适...

标签： html css twitter-bootstrap fonts google-font-api

【解决方案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' />

【讨论】：

不幸的是结果没有改变......（但是在生产中我应该使用 // 还是 http？）
在生产中 // 很好。然后它将适用于 http 和 https 流量。

【解决方案2】：

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

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

是的，请在 google 字体链接之前保留 http:。

此外，如果您的网站使用 SSL 证书 (https://yourdomain.com)，则对您网站上的所有内部和外部链接使用https:，但如果您的网站不使用任何 SSL 证书 (http://yourdomain.com) 然后将http 用于您网站中的所有链接。

【讨论】：