I want to make a simple web page to test OpenType features.
What I want: I simply enter some text and the feature I want to use in inputboxes, and click a button to change the content and style of a div.
However I found that the font-feature-settings wouldn't change as I expect. For example,
<html>
<body>
<input id="feature" /><input type="button" value="Change Feature" onclick="
alert(document.getElementById('feature').value);
document.getElementById('display').style.fontFeatureSettings=document.getElementById('feature').value;
alert(document.getElementById('display').style.fontFeatureSettings);" />
<div id="display" style="font-size:72;">Some text</div>
</body>
</html>In my Chrome, the first message box shows what I inputed, yet the second message box is always empty.
I end up defining a lot of CSS classes and changing them with javascript. It works now, but it doesn't meet my need, for I have to predefine a lot of features and thus have difficulty in extending it for future use.