Question

我在网站上使用字体Cg Omega时遇到了麻烦。

这是我的HTML：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="font.css">
    <style type="text/css">
    /* when @font-face is defined(it is in font.css) you can add the font to any rule by using font-family */
    h1 {
        font-family: 'cgomeg';
    }
    </style>
</head>
<body>
    <h1>Lorem Ipsum</h1>
    <p class="the-font">Lorem ipsum dolor sit amet</p>

这是我的CSS：

@font-face {
font-family: 'cgomeg';
src: local('cgomeg'), url('cgomeg.ttf') format('truetype');
}


/* use this class to attach this font to any element i.e. 
<p class="the-font">Text with this font applied</p> */
.the-font {
font-family: 'cgomeg' !important;
}

所有代码似乎都正确，并且所有文件都在正确的位置，我三重检查。我还使用了一种不同的字体，我在FontsForWeb.com上找到了，而且那个字体有效，但是这个字体没有。我真的不知道我做错了什么，我需要专家的建议！

谢谢！

Answer 1

首先，您应该使用!important，这将很难传承类并执行子规则，因此css规则应该是：

.the-font {
   font-family: 'cgomeg';
}

此外，当您定义字体时，该名称没有任何破折号，因此当您将其应用于h1时应该是：

h1 {
    font-family: 'cgomeg';
}

注意：我认为该字体与.css 样式表位于同一文件夹中。

如何在我的html网站上安装自定义字体

1 个答案: