So I buy this new book to learn awesome CSS3. I come across a CSS property font-feature-settings
.
I check on CanIUse, if the property has been implemented, which says it has been implemented on chrome 49 and firefox 45 (versions which I have installed).
But still the property does not seem to work.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
-webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
-moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
-moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
-moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
font-feature-settings: "kern", "liga", "case"; /* No variation */
}
</style>
</head>
<body>
<h1 class="smallcaps">Lorem Ipsum Dolor</h1>
<h1 class="ot-smallcaps">Lorem Ipsum Dolor</h1>
<h1 class="lig-none">The gift of acts</h1>
<h1 class="lig-common">The gift of acts</h1>
<h1 class="lig-disc">The gift of acts</h1>
</body>
</html>
I have used the props in a way that they should work on almost all versions of chrome and firefox still no success.
Please help. What could be going wrong??