通过font face在css中导入字体

Question

字体不起作用

这是 CSS 代码

@font-face {
  font-family: 'Soolidium', sans-serif;
  font-style: normal;
  src:url(http://localhost/changingCinema/font/Soolidium.ttf) format('truetype');
}

heading
        {
            float:left;
            width:100%;
            margin-bottom:10px;
            font-size:54px;
            font-family: 'Soolidium', sans-serif;}

这是 HTML

<heading>My heading</heading>

仅当我在窗口中安装此字体时才有效，否则无效。

请帮我快点谢谢。

Answer 1

在 Font face 中设置字体系列名称

@font-face {
  font-family: 'Soolidium';
  font-style: normal;
  src: url('http://localhost/changingCinema/font/Soolidium.ttf') format('truetype'); 
  }

对于所有浏览器支持，您必须提供来自不同字体文件的 url。 (.eot/.woff/.ttf/.svg)

Answer 2

首先，请确保将 @font-face 放在任何其他样式之前。

如果可能，您可能还需要为浏览器支持添加其他规则，如下所示：

@font-face {
    font-family: 'Soolidium', sans-serif;
    src: url('Soolidium.woff2') format('woff2'),
    url('Soolidium.woff') format('woff'),
    url('Soolidium.ttf') format('truetype');
}

并一如既往地检查拼写错误或指向错误的路径。 请记住，您是从 CSS 文件中调用它的，因此您需要相对指向字体文件夹。

Answer 3

尝试更换：

src:url(http://localhost/changingCinema/font/Soolidium.ttf) format('truetype');

和：

src: url('../font/Soolidium.ttf');

假设您的根目录中有一个名为“font”的文件夹，其中包含字体“Soolidium.ttf”。