Question

我正在尝试在我的网站上添加自定义字体。在我的CSS页面上，我有：

body
{
    font-family: HurmeGeometricSans4_SemiBold;
}

@font-face
{
    font-family: HurmeGeometricSans4_SemiBold;
    src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf);
}

该文件最初名为“Hurme Design - HurmeGeometricSans4 SemiBold”，我从myfonts.com获得了网络许可。资源目录与我的样式表所在的目录相同。任何人都可以看到我在这里做的可能是错的吗？尝试了很多，但无法让它工作。这主要用于移动旅游。

Answer 1

如果CSS与字体位于同一目录中，则忘记添加子目录，在您的案例resources/中。它将显示为resources/resources/font，而不是必需的resources/font。

如有疑问，请使用完整的网址（例如http://www.yourdomain.com/path-to-font/font）

Answer 2

试试这个

<强> CSS

@font-face
{
    font-family: myCustomFont;
    src: url(sansation_light.woff);
}

div
{
  font-family:myCustomFont;
}

<强> HTML

<div>test custom font</div>

更新 :(使用html页面和同一目录中的字体）

<html>

<head>

<style>

@font-face
{
    font-family: myCustomFont;
     src: url(elephant.ttf);
}

div
{
 font-family:myCustomFont;
}

</style>


</head>




<body>

<div>custom font</div>
default font

</body>



</html>

enter image description here

Answer 3

尝试添加格式提示格式（＆＃34; opentype＆＃34;），如下所示：

    body
    {
        font-family: HurmeGeometricSans4_SemiBold;
    }

    @font-face
    {
        font-family: HurmeGeometricSans4_SemiBold;
        src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf) format("opentype");
    }

此外，@ font-face存在一些浏览器问题 - 您可以查看浏览器的可联网图表，例如在这里：http://everythingfonts.com/font-face#idTab3

您也可以使用在线字体转换器并将字体转换为多种格式并使用生成的CSS。

不能让@ font-face工作

3 个答案: