html - 不知道如何在 HTML/CSS 中应用自定义字体

标签 html css custom-font

因此,我查看了有关此问题的另一个问题的答案,并自己尝试了这一点。我想使用 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 .

最佳答案

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

  1. 转到https://google-webfonts-helper.herokuapp.com/fonts
  2. 选择您想要的字体并下载文件
  3. 从页面中拖入生成的 CSS,并在 HTML 中引用 CSS 文件,如下所示:

    <link rel="stylesheet" href="path/to/styles.css">
    

关于html - 不知道如何在 HTML/CSS 中应用自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45572542/

相关文章:

javascript - 动态改变 div 宽度 - 奇怪的问题

html - 可扩展的 div(点击时),内联 block ,不下推第二行的其他 div

css - 是否有 css 调试工具来测试整个样式表是否存在冲突?

iOS UIWebView 完全看不懂不止一个@font-face?

android - Sherlock 操作栏自定义字体

fonts - 如何在 JFreeChart 图表中使用自定义字体?

javascript - 查找嵌套字段集中的最后一个子 div

android - 开发跨平台应用程序

javascript - svg getScreenCTM 中的 Chrome 错误

twitter-bootstrap - Bootstrap 3 : bootstrap-select and input-group-addon