可变字体不响应声明的字体粗细

Question

请指教连接Roboto-mono变量有什么问题。我使用 ubuntu Focal Fossa 并使用标准 index.html、styles.css.

下载此字体并将其连接到我的网站样本

我已经下载了两种字体，甚至安装了静态字体并连接了它们。但是，我还是只有两种风格，有“regular”和“bold”。

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

有没有可能我不使用本地主机而是在浏览器中打开 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>

Answer 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

Is that possible I do not use localhost but open index.html such as simple file in browser?

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

可变字体不响应声明的字体粗细

Variable font does not respond with font-weight declared

css

fonts