变量字体不响应声明的字体粗细答案

【问题标题】：Variable font does not respond with font-weight declared变量字体不响应声明的字体粗细
【发布时间】：2021-06-30 07:12:11
【问题描述】：

请告知连接 Roboto-mono 变量有什么问题。我使用 ubuntu Focal Fossa 并使用标准 index.html、styles.css 下载此字体并将其连接到我的站点示例。

我已经下载了两种字体，甚至安装了静态字体并将它们连接起来。但是，我仍然只有两种样式，“常规”和“粗体”。

即使我尝试 font-weight: 100 或 300，也不是“更轻”，只有当我输入“600”时字体的粗细才会改变。下面没有其他字体声明，所以文件很简单，只有一个声明体 { font-family: Roboto, monospace; }。就是这样。

这可能我不使用 localhost 而是在浏览器中打开 index.html 之类的简单文件吗？或者，这是另一个原因？

<div class="carousel__cell">test1</div>
<style>
    /*@font-face {
        font-family: "Roboto";
        src: url("fonts/RobotoMono-VariableFont_wght.ttf") format("ttf");
        font-weight: 100;
    }*/
    @font-face {
        font-family: "Roboto";
        src: url("fonts/RobotoMono-Thin.ttf") format("ttf");
        font-weight: 100;
    }
        
    html,
    body {
        height: 100%;
        font-family: Roboto, monospace;
        /*font-variation-settings: 'wght'100;*/
        font-weight: 100;
    }
</style>

【问题讨论】：

标签： css fonts

【解决方案1】：

您必须在format() 函数中指定格式名称，而不是文件扩展名。

TrueType 字体的格式名称是 truetype 而不是 ttf。

见the specification:

String	Font Format	Common extensions
"woff"	WOFF 1.0 (Web Open Font Format)	.woff
"woff2"	WOFF 2.0 (Web Open Font Format)	.woff2
"truetype"	TrueType	.ttf
"opentype"	OpenType	.ttf, .otf
"embedded-opentype"	Embedded OpenType	.eot
"svg"	SVG Font	.svg, .svgz

有没有可能我不使用localhost而是在浏览器中打开index.html之类的简单文件？

浏览器确实对字体施加了跨域限制。如果您不通过 HTTP(S) 加载页面，它们可能适用。不过，这将是一个额外的问题。

【讨论】：

这是解决方案，我的感谢