Лигатуры (и шрифты) в IE10

У меня возникла проблема с правильным отображением кода в IE10. Мне комфортно с тем, что он не сможет работать в IE9 <, но в соответствии с лингатурами caniuse.com (и истинным типом) должно функционировать, как ожидалось, в IE10. Существует ли специальное правило, необходимое для выполнения этой работы?Лигатуры (и шрифты) в IE10

Вот соответствующий 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>

И вот 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; }

Это отрывок из более крупного проекта, который можно увидеть на live_share_test.aws.af.cm

это в настоящее время работает с Chrome версии 27.0.1453.94 m, Opera v 12, Firefox 19.0.2 на Windows, а также текущую установку Safari на iPhone 4.

источник

2013-05-31 Crispen Smith

IE 10 поддерживает «font-feature-settings»: «dlig» 1', как вы можете видеть, например. путем тестирования шрифтом Calibri и текста «st». Можете ли вы указать, какие дискреционные лигатуры следует увидеть на вашей странице и где? –

Шрифт взят из icomoon и настроен для замены слов в панели Nav («Главная», «Мобильный», «Портфолио» и «Питание») с помощью значков. Эти значки берутся из бесплатного пакета icomoon. –

Как обложка шрифта относится к лигатурам? –

Я действительно нашел часть документации по этому поводу, немного неясно, и это то, что приводит к разрыву.

Важная идея здесь состоит в том, чтобы элемент был правильно настроен с использованием шрифта. Вот пересмотренная декларация .nav, которая работает правильно (с использованием префикса свободным добавить соответствующие префиксы) ...

(Обратите внимание, что я переехал в каталог шрифтов в директории Стилей для облегчения путей)

@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; }

Также есть немного более описательная работа, добавленная к лицу шрифта, чтобы сделать его более компактным, это взято непосредственно из 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; }

В заключительной ноте, я на самом деле делать это в SASS и используя эти исходный код:

@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; }

Так, короче говоря: Нанести dlig 1 к элементу, а не лицо шрифта.

источник

2013-06-01 00:42:11

Лигатуры представляют собой совместные буквы или другие формы, которые заменяют наборы обычных букв. например f + f + l = ffl как одна часть. Unicode рекомендует хранить глифы (рисунки) лигатур в области личного использования (PUA) базы данных символов Unicode. Они начинаются с U + E000 и имеют около 6400 кодовых точек. Затем вы определяете таблицы подстановки Glyph Substitution (GSUB) для определения правил для замены набранных букв лигатурами. Для этого вы можете использовать программу Volt от Microsoft.

Что такое скрипт в шрифтах? Шрифт, совместимый с OpenType (теперь ISO OpenFont), может иметь один или несколько сценариев. Такой сценарий - латынь, используемый английским и западноевропейским языками. Языки России и Восточной Европы используют кириллицу. Существует два типа лигатур: стандартный и дискреционный. Любой скрипт может иметь STANDARD Ligatures. Самое главное, что стандарт OpenType говорит, что приложения должны показывать СТАНДАРТНЫЕ ЛИГАТУРЫ по умолчанию. Все браузеры, кроме Internet Explorer, соответствуют этой спецификации.

Internet Explorer 10, кажется, требует, чтобы специальная директива CSS включала лигатурный дисплей: font-feature-settings: 'liga' 1; < - обратите внимание на '1'. Это означает «включено». Тот же синтаксис применяется к «dlig» и т. Д. Microsoft, похоже, не понимает стандарт, который они написали. 'liga' 1 должен быть по умолчанию и не нужно указывать. Вы используете 'liga' 0, чтобы заставить программу пропускать лигатурный дисплей.

Ранние дни (2006), свойство SVG-CSS3, «text-rendering: geometricPrecision (или OptimizeLegibility» использовалось для отображения лигатур браузера. Теперь нет необходимости показывать стандартные лигатуры в соответствии с шрифтом . стандарт

Стандартные лигатуры помогают оживить искалеченную INDIC См веб-страницу, написанную со шрифтом, что практически все лигатуры (Это на самом деле Романизированное сингальском Копирование текста в Блокнот для проверки.). A Singhala blog
Все современные браузеры на компьютерах и смартфоны показывают эту страницу правильно, кроме IE, предшествующей версии 10. Другие браузеры показывают стандартные лигатуры без CSS. Для IE 10 требуется настройка шрифта правило.

источник

2013-10-30 13:48:25 user2422970

Лигатуры (и шрифты) в IE10

ответ

Смежные вопросы