logo标签列表

IE10中的连字（和字体）

htmlcssfontsinternet-explorer-10
4

我在IE10中遇到了以下代码无法正确显示的问题。我知道它不能在IE9及以下版本中工作，但根据caniuse.com的数据，连字号（和TrueType字体）应该在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中查看。

目前这个项目可以在Windows上使用Chrome版本27.0.1453.94 m、Opera v 12、Firefox 19.0.2以及iPhone 4上安装的最新版Safari中正常运行。

1
IE 10支持font-feature-settings: "dlig" 1，您可以通过使用Calibri字体和文本“st”进行测试来查看。请指定应在页面上看到哪些自选连字以及它们的位置。 - Jukka K. Korpela
字体取自icomoon，设置为用图标替换导航栏中的单词（“主页”，“移动”，“作品集”和“电源”）。这些图标都来自icomoon免费包。 - Crispen Smith
字体技巧与连字有何关联？ - Jukka K. Korpela
这是一种相当简单的连字用法。 我们有一个名为ui.ttf的字体。UI.ttf中有一个“home”的连字，该连字空间中有一个字符，由文本渲染引擎找到并刷新到屏幕上。这是符号字体的扩展，更可取的原因是蜘蛛可以读取“home”，而不是读取“h”。 - Crispen Smith
1
多么可怕的把戏，只是为了把单词变成神秘的图标。如果你使用普通的 img 并加上适当的 alt，你就不会制造这个问题，你的页面将在任何浏览器上工作。 - Jukka K. Korpela
说实话，无论你是否同意这种做法，它都是一种不断发展的做法，我信任的许多来源似乎都认为这是一件好事。我同意另一种方法也可以起作用，但采用这种方法也有明显的好处，其中最大的好处之一是由于往返次数较少而导致更快的加载时间。这并不是取代你的方法，而只是工具箱中的另一个工具。 - Crispen Smith
2个回答
3
连字是替换一组常规字母的联合字母或其他形状。例如，f+f+l=fll成为一个整体。Unicode建议将连字的字形（绘图）存储在Unicode字符数据库的专用使用区（PUA）中。它们从U+E000开始，有大约6400个代码点。然后定义Glyph Substitution（GSUB）表以定义将键入的字母替换为连字的规则。您可以使用Microsoft的Volt程序完成此操作。
字体中的脚本是什么？符合OpenType规范（现在是ISO OpenFont）的字体可以具有一个或多个脚本。这样的脚本是拉丁文，用于英语和西欧语言。俄语和东欧语言使用西里尔字母。有两种连字：标准连字和自选连字。任何脚本都可以具有标准连字。最重要的是，OpenType标准指出应用程序默认应显示标准连字。除Internet Explorer外的所有浏览器都遵守此规格。
看来Internet Explorer 10需要特殊的CSS指令才能打开连字显示： font-feature-settings：'liga' 1; <--请注意'1'。那意味着“开”。相同的语法适用于'dlig'等。微软似乎不理解他们编写的标准。'liga'1应该是默认值，并且不需要指定。您可以使用'liga' 0来强制程序跳过连字显示。
早期（2006年），SVG-CSS3属性'text-rendering：geometricPrecision（或OptimizeLegibility'用于使浏览器显示连字。现在，根据字体标准，无需显示标准连字。
标准连字有助于恢复残疾的印度语。请查看使用几乎所有连字字体编写的网页（这实际上是罗马化的辛哈拉语。将文本复制到记事本中进行验证）： A Singhala blog
除IE 10之前的版本外，计算机和智能手机上的所有现代浏览器都可以正确显示此页面。其他浏览器显示标准连字而无需任何CSS。 IE 10需要font-feature-setting规则。
1
我发现一些相关的文档不够清晰，导致了这个问题的出现。
这里的重要思想是正确配置使用font-face的元素。这是.nav的修订声明，可以正常工作（使用prefix-free添加适当的前缀）...
（请注意，我将字体目录移动到样式表目录下以便更容易地设置路径）。
@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应用于元素，而不是字体。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接