每种字体的可用值 font-weight答案

【问题标题】：Available values font-weight for each font每种字体的可用值 font-weight
【发布时间】：2016-12-23 04:14:43
【问题描述】：

我正在开发使用 Google 字体的文本编辑器之类的东西，我想为字体粗细构建选择器，但我只需要可用的字体值（例如 Open Sans 有 300、400、600、700、800），对每个人也是如此。

如何获取每种字体的可用值 font-weight 列表？

【问题讨论】：

这是一个很长的镜头，因为自从您发布您的问题后就没有出现过，但是您使用什么语言来构建这个工具？

标签： html css fonts

【解决方案1】：

您可以使用<select> 标签输入字体粗细值。

这里是如何做到这一点的。

当用户选择字体系列时，您可以使用 javascript 代码在 <select> 中添加字体粗细选项

代码

HTML

<select id="font-family">
    <option value="'Times New Roman', Times, serif">Times New Roman</option>
    <option value="font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif">Impact</option>
    <option value="Arial, Helvetica, sans-serif;">Arial</option>
</select>
<select id="font-weight"></select>

JavaScript

var fntwgts = { 'FW_NewTimes': [100, 200, 300], 'FW_Arial': [300, 500, 600], 'FW_Impact': [200, 500, 700] };

document.getElementById('font-family').addEventListener("change", () => {
    var FW = document.getElementById('font-weight');
    if(FW.children.length>0){
        FW.innerHTML = '<option value="Default">Default</option>';
    }
    var val = document.getElementById('font-family').value;
    for (var i = 0; i < fntwgts[val].length; i++) {
        var opt = document.createElement("option");
        opt.setAttribute("value", fntwgts[val][i].toString());
        opt.innerHTML = fntwgts[val][i];
        FW.appendChild(opt);
    }
});

【讨论】：