language-specific-01.html (1387B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>CSS Test: language-specific display</title> 5 <link rel="author" title="Chris Lilley" href="chris@w3.org"> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-3/#language-specific-support"> 7 <link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop"> 8 <meta name="assert" content="However, in languages such as Turkish which uses both a dotted-i and a dotless-i, it's important to not use this ligature or use a specialized version that contains a dot over the "i"."> 9 <style> 10 @font-face { 11 font-family: Lato; 12 src: url(support/fonts/Lato-Medium.ttf); 13 } 14 .test { 15 font-size: 4em; 16 font-variant-ligatures: common-ligatures; 17 font-feature-settings: "liga" on, "clig" on; 18 margin-left: 1em; 19 font-family: Lato; 20 } 21 22 </style> 23 <body> 24 25 <p>Test is passed if:</p> 26 <ol> 27 <li>The word fijord on the first line uses an <strong>fi</strong> ligature</li> 28 <li>It is clear that the second line has a letter f followed by a Turkish dotless-i while the third line has a letter f followed by a (dotted) i. If an <strong>fi</strong> ligature is used on either the second or third line, it must still be possible to distinguish the two.</p> 29 30 <p class="test" lang="en">fijord</p> 31 <section class="test" lang="tr"> 32 <p>fıstık</p> 33 <p>fikir</p> 34 </section>