每种字体的可用值 font-weight

Question

I am working on something like text editor using Google fonts and I want to build selector for font-weight, but I need only available values for font (for example Open Sans has 300, 400, 600, 700, 800), and so for everyone.

How can I get list of available values font-weight for each font?

Answer 1

you can use <select> tag to input font-weight values.

here how you can do this.

you can use javascript code to add options of font-weight in <select> when a user selects a font-family

CODE

---

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