时间戳

首页 > 解决方案 > 带有“Honey Script”字体文本的跨度没有任何使用字体的高度。怎么修？

html - 带有“Honey Script”字体文本的跨度没有任何使用字体的高度。怎么修？

问题描述

我正在使用“Honey Script Semibold”字体。我使用@font-face 将它导入到项目中。像这样：

@font-face {
    font-family: "Honey Script SemiBold";
    src: url("../fonts/HoneyScript-SemiBold.eot") format("eot"),
        url("../fonts/HoneyScript-SemiBold.woff") format("woff"),
        url("../fonts/HoneyScript-SemiBold.ttf") format("truetype"),
        url("../fonts/HoneyScript-SemiBold.svg#HoneyScript-SemiBold") format("svg");
    font-weight: normal;
    font-style: normal;
}

问题是当我将此字体的任何文本放入任何内联块（如跨度）时，它确实显示了文本，甚至更改了大小，但它的定位方式错误并且它不在块内，而只是浮动随机。

所有其他字体都有效，我以相同的方式导入了所有字体。由于某种原因，只有这种字体不起作用。Safari 根本不显示文本。Chrome 显示它只是随机浮动在页面上。先感谢您！

标签： htmlcssfontsfont-face

解决方案

您可以使用此代码

@font-face {
    font-family: 'honey_scriptsemibold';
    src: url('honeyscript-semibold-webfont.woff2') format('woff2'),
         url('honeyscript-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

推荐阅读