为什么@ font-face在此代码段中不起作用？

编程问答 2022-08-14

问题描述

当我尝试使用font-face时，它什么也没做，也不改变字体。为什么不起作用？ 这是我的HTML代码

<!DOCTYPE html>
<html lang="de">

    <head>
        <Meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="schriftarten.css">
    </head>

    <body>
        <span id="span1">Hallo Welt</span>
    </body>

</html>

这是我的CSS代码：

@font-face {
  font-family: "Test";
  src: url("Anton-Regular.ttf") format("ttf");
  font-style:normal;
}

#span1{
  background-color:orange;
  font-size:30px;
  font-family:Test;
}

我在做什么错？我正在使用Chrome版本84.0.4147.135（Offizieller Build）（64位）

解决方法

您需要使用所有类型的字体来匹配所有浏览器标准，这是一个示例，可让您对CSS代码有所了解：

@font-face{
font-family:YOUR_FONT_NAME;
src:url('YOUR_FONT_NAME.eot');
src:url('YOUR_FONT_NAME.eot?#iefix') format('embedded-opentype'),url('YOUR_FONT_NAME.woff') format('woff'),url('YOUR_FONT_NAME.ttf') format('truetype'),url('YOUR_FONT_NAME.svg#weberdsBold') format('svg');

}

,

我刚刚找到了解决方案。 错误是格式（“ ttf”） 当我删除它时，很好

font-facefontsfontshtml