css - 如何制作一个导航栏来展示字体的不同粗细？

Question

所以我正在尝试制作水平交互栏来展示我字体的不同权重。我有 14 行展示它，但不知道如何将它降低到 1 行，而只是在不同的权重之间切换。最终产品的屏幕截图。

标签： cssscriptingwebfontstypography

Answer 1

我制作了一个纯 JS 代码来克隆您的文本元素，然后增加字体重量。
你可以在这里看到它=> https://codepen.io/baessodiego/pen/YzXbqev

或者在这里

var j = 100

for(i=0; i<9; i++){
var p = document.createElement("P");  // Create a <> element
var t = document.createTextNode("Your font here, " + j);  // Create a text
p.id = "font"; // add id to P
p.appendChild(t); // add Text to P
p.style.fontWeight = j; // add Style to P

j += 100 // Increase weight

document.body.appendChild(p);  // append element to other elements
}