All geek questions in one place

Ligatures (and fonts) in IE10

I am having a problem with correctly displaying code in IE10. I am pleased that it will not be able to work in IE9 <but according to linguatures caniuse.com (and the true type) should function as expected in IE10. Is there a special rule necessary to complete this work?

Here's the relevant HTML:

<body> <nav role = "navigation" class = "nav"> <ul> <li> <a href="#branches" class="selected">home</a> </li> <li > <a href="#trees">mobile</a> </li> <li> <a href="#path">portfolio</a> </li></li> <li>< a href="#power">power</a> </li> </ul> </nav>

And here is the CSS:

 @font-face { font-family: "ui"; src: url("../fonts/Live-Share-UI.eot"); src: url("../fonts/Live-Share-UI.svg") format("svg"); src: url("../fonts/Live-Share-UI.ttf"); font-feature-settings: "dlig" 1; } .nav, .header { font-family: ui; position: fixed; text-align: center; z-index: 50; top: 0; bottom: 0; left: 0; margin: auto auto 1em auto; right: 0; height: 1.5em; }

This is an excerpt from a larger project that can be seen at live_share_test.aws.af.cm

He currently works with Chrome version 27.0.1453.94 m, Opera v 12, Firefox 19.0.2 on Windows, as well as the current installation of Safari on iPhone 4.

+4
source share
2 answers

I really found some of the documentation about this, a bit unclear and what led to the break.

The important idea here is to properly configure the element with the font. Here's a revised declaration for .nav that works correctly (using a prefix to add the appropriate prefix) ...

(Note that I have moved the font directory to the stylesheets directory for easier paths)

 @font-face { font-family: 'Live-Share-UI'; src: url("fonts/Live-Share-UI.eot"); src: url("fonts/Live-Share-UI.eot?#iefix") format("embedded-opentype"), url("fonts/Live-Share-UI.woff") format("woff"), url("fonts/Live-Share-UI.ttf") format("truetype"), url("fonts/Live-Share-UI.svg#Live-Share-UI") format("svg"); font-weight: normal; font-style: normal; }

In addition, a little more descriptive work is added to the face of the font to make it more compact, this is taken directly from icomoon.

 .nav, .header { font-family: Live-Share-UI; font-feature-settings: "liga","dlig"; text-rendering: optimizeLegibility; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-smoothing: antialiased; position: fixed; text-align: center; z-index: 50; margin: auto auto 1em auto; top: 0; bottom: 0; left: 0; right: 0; height: 1.5em; }

As a final note, I actually do this in SASS and using this source code:

 @mixin ui () { font-family: Live-Share-UI; font-feature-settings:"liga","dlig"; text-rendering:optimizeLegibility; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .nav, .header{ @include ui(); position: fixed; text-align: center; z-index: 50; top: 0; bottom: 0; left: 0; margin: auto auto 1em auto; right: 0; height: 1.5em; }

So, in short: Apply dlig 1 to the element, not the face of the font.

+1
source

Ligatures are conjunctive letters or other forms that replace many ordinary letters. e.g. f + f + l = ffl as one part. Unicode recommends storing glyphs (drawings) of ligatures in the personal use area (PUA) of the Unicode character database. They start with U + E000 and have about 6400 code points. Then you define the Glyph Substitution (GSUB) lookup tables to define the rules for replacing typed letters with ligatures. You can use Microsoft Volt to do this.

What is a script in fonts? A font compatible with OpenType (now ISO OpenFont) may have one or more scripts. Such a script Latin is used in English and Western European. The languages ​​of Russia and Eastern Europe use the Cyrillic alphabet. There are two types of ligatures: standard and discretionary. Any script can have STANDARD Ligatures. Most importantly, the OpenType standard says that applications should show STANDARD LIGATURES by default . All browsers except Internet Explorer comply with this specification.

Internet Explorer 10 seems to require a special CSS directive to enable ligature display: font-feature-settings: 'liga' 1; <- mark the value '1'. It means 'on'. The same syntax applies to "dlig", etc. Microsoft does not seem to understand the standard they wrote. 'liga' 1 should be the default and no need to specify. You use "liga" 0 to make the program skip the ligature display.

In the early days (2006), the SVG-CSS3 property "text-rendering: geometricPrecision (or OptimizeLegibility" was used to display ligatures on the browser display. Now there is no need to show standard ligatures according to the font standard.

Standard ligatures help revive a distorted Indication. See a Web page written in a font that is almost all ligatures (this is actually a romanized Singhala. Copy the text into Notepad for verification): Singhala Blog
All modern browsers on computers and smartphones show this page correctly, except for IE, the previous version 10. Other browsers show standard ligatures without CSS. IE 10 requires a font configuration rule.

+3
source

Source: https://habr.com/ru/post/1483862/

More articles:


All Articles