不确定如何在 HTML/CSS 中应用自定义字体答案

【问题标题】：Not sure how to apply custom fonts in HTML/CSS不确定如何在 HTML/CSS 中应用自定义字体
【发布时间】：2018-01-16 06:32:52
【问题描述】：

所以我检查了另一个正在回答的问题，并自己尝试了这个。我想使用 Lobster 两种字体，但我不确定我做错了什么。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Cogna</title>
    <link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<table id="site">
    <tr>
        <td id="Cogna">Cogna</td>
        <td style="border: 2px solid black; border-collapse: collapse;">a</td>
    </tr>
    <tr>
        <td style="border: 2px solid black; border-collapse: collapse;">a</td>
        <td style="border: 2px solid black; border-collapse: collapse;">a</td>
    </tr>
</table>
</body>
</html>

CSS：

@font-face {
    font-family: 'Lobster Two';
    src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}

#Cogna {
    font-family: 'Lobster Two', Times, serif;
    font-size: 5em;
    border: 2px solid black; border-collapse: collapse;
    padding: 18pt;
    width: 20%
}

#site {
    border-collapse: collapse;
    width: 100%;
}

我知道如果找不到字体，我已经要求它用 Times New Roman 替换，但我真的很想使用该字体。

任何帮助都会很棒。谢谢。

编辑：这是字体的确切链接：https://fonts.google.com/specimen/Lobster+Two。

【问题讨论】：

您确定这是正确的网址吗？你错过了一个重要的部分。
@chazsolo 我对 CSS 有点陌生，我在这里得到的链接有点混合：cssfontstack.com/Lobster-Two，我的 CSS。
请查看 Google 关于添加自定义字体的优秀开发人员文档。写得很好，很容易理解。 developers.google.com/fonts/docs/getting_started
如果您只是学习，请不要学习使用表格进行编码。表格不是为页面布局制作的。 beginnersguidetohtml.com/guides/css/layout/div-tags

标签： html css custom-font

【解决方案1】：

我认为您需要更改此设置 src: url("//fonts.googleapis.com/css?family=Lobster+Two"); 进入这个src: url("http://fonts.googleapis.com/css?family=Lobster+Two");

【讨论】：

【解决方案2】：

2 添加谷歌字体的方法：

标准：

在你的 html 文件的头部添加 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">

CSS：

将族应用于您在 style.css 文件中选择的任何元素，例如：

h1 {
    font-family: 'Lobster', cursive;
}

【讨论】：

【解决方案3】：

尝试使用这个来包含字体：

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');

而不是

@font-face {
font-family: 'Lobster Two';
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}

【讨论】：

【解决方案4】：

use this in your html file: <link href="https://fonts.googleapis.com/css? family=Lobster+Two" rel="stylesheet">

将此添加到您要在其中应用字体的 CSS 中

font-family: 'Lobster Two', cursive;

试试这个..祝你好运:)

【讨论】：

【解决方案5】：

Google 非常友好，可以为您提供有关如何使用其字体的分步指南。

更多详情请关注their wiki

【讨论】：

【解决方案6】：

引用字体的链接很好，但最好下载字体。我是按照this answer做的。

转到https://google-webfonts-helper.herokuapp.com/fonts
选择您想要的字体并下载文件
从页面中放入生成的 CSS，并在您的 HTML 中引用 CSS 文件，如下所示：
```
<link rel="stylesheet" href="path/to/styles.css">
```

【讨论】：

【解决方案7】：

在样式表中使用

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');

然后你要在哪里应用字体：

font-family: 'Lobster Two', cursive;

【讨论】：