实现代码

<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浏览器可以