学习使用jquery控制select下拉选项的字体样式

实现代码

<script src="../jquery-2.1.4.min.js"></script>

    <style>
        div#container {
            padding: 30px;
            font-family: 'verdana', lucida;
        }

        a {
            color: #777;
            display: block;
            background-color: #ccc;
            width: 300px;
            padding: 0;
            margin-top: 2px;
            text-decoration: none;
        }

        /*思源黑体CN-Medium*/
        @font-face {
            font-family: 'SourceHanSansCN-Medium';
            src: url("https://www.qipa250.com/fonts/SourceHanSansCN-Medium.otf");
        }

        /*汉仪雅酷黑-85W*/
        @font-face {
            font-family: 'HanYiYaKuHei85w';
            src: url("https://www.qipa250.com/fonts/HanYiYaKuHei-85W.ttf");
        }

        /*思源宋体CN-Medium*/
        @font-face {
            font-family: 'SourceHanSansSongTiCN-Medium';
            src: url("https://www.qipa250.com/fonts/SourceHanSansSongTiCN-Medium.otf");
        }


        /*优设标题黑*/
        @font-face {
            font-family: 'YouSheBiaoTiHei-2';
            src: url("https://www.qipa250.com/fonts/YouSheBiaoTiHei-2.ttf");
        }


    </style>

    <select style="font-family:'SourceHanSansCN-Medium';" name="certificate_title_font" onchange="getfontlib(this,0)">
        <option value="SourceHanSansCN-Medium" style="font-family:'SourceHanSansCN-Medium'; ">思源黑体</option>
        <option value="HanYiYaKuHei85w" style="font-family:'HanYiYaKuHei85w'; ">汉仪雅酷黑-85W</option>
        <option value="SourceHanSansSongTiCN-Medium" style="font-family:'SourceHanSansSongTiCN-Medium'; ">
            思源宋体
        </option>
        <option value="YouSheBiaoTiHei-2" style="font-family:'YouSheBiaoTiHei-2'; ">优设标题黑</option>
    </select>

script 方法

//更换字体
function getfontlib(that) {
    var index = that.selectedIndex;
    var font_val = that.options[index].value;
    var text = that.options[index].text;
    console.log('index==', index);
    console.log('font_val==', font_val);
    console.log('text==', text);
    $(that).attr("style", "font-family:'" + font_val + "';");

}

效果图：

注意：

火狐浏览器，下拉选项字体不兼容，谷歌和Edge浏览器可以