如何在html中创建字体选择栏 [英] How to create a font selection bar in html
问题描述
我想创建一个下拉菜单，在其中我们可以看到所有可用的字体，我们可以选择我们选择的任何字体。我还想创建一个字体颜色选择小部件。存在大量的字体样式。我想知道如何获得所有这些字体以及如何使用哪个用户可以选择他选择的颜色来创建窗口小部件。
I want to create a drop-down menu in which we can see all the available fonts and we can select any font of our choice. Also I want to create a font-color selection widget. There exists a large no of font-styles. I want to know how do i get all these fonts and how to create a widget using which user can select the color of his choice.
用于创建字体选择drop-向下菜单，我使用了列表和演示目的，我添加了3-4个字体名称并显示它们。它的工作正常。
谷歌给了我所有字体名称的列表，但是用html代码写下我觉得不是一个好方法。
我想应该存在一个用于完成所有这些的js库。有吗？
For creating font-selection drop-down menu, I have used list and for demo purpose, i added 3-4 font names and displaying them. Its working fine. Google gave me the list of all font-names but writing down in html code isn't a good approach i think. I guess there should exist a js library for doing all this. Is there ?
推荐答案
Jukka K. Korpela是对的，但关于你的问题：
Jukka K. Korpela is right, but regarding your question:
这个应该让您开始选择字体系列：
This should get you started on the selecting font family:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="liveh1">Some text</h1>
<select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
<option> Serif </option>
<option> Arial </option>
<option> Sans-Serif </option>
<option> Tahoma </option>
<option> Verdana </option>
<option> Lucida Sans Unicode </option>
</select>
<script>
function updateh1family() {
var selector = document.getElementById('selecth1FontFamily');
var family = selector.options[selector.selectedIndex].value;
var h1 = document.getElementById('liveh1')
h1.style.fontFamily = family;
}
</script>
</body>
</html>
如果确定字体是否已安装很重要，可以使用这个要检查的工具。
如果可以使用flash，你可以使用 font-detect-js （他们还有演示，但我没有管理让它在chrome中工作。）
If it's important to see if the fonts are installed you can use this to tool to check. And if it's ok to use flash you may use something like font-detect-js (they also have a demo but I didn't manage to get it to work in chrome).
对于颜色选择器，我建议使用： jscolor
And for color selector I would recomend using : jscolor
希望它有所帮助，祝你好运！
Hope it helps, and good luck!
这篇关于如何在html中创建字体选择栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
