Question

我正在处理类似文本编辑器的东西，使用谷歌字体，我想为font-weight构建选择器，但我只需要字体的可用值（例如Open Sans有300,400,600,700,800），所以每个人都这样。

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

Answer 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);
    }
});

每种字体的可用值font-weight

1 个答案:

代码