Question

这适用于FF和Chrome。自定义font-face的一些字符用作图标。使用了防弹字体定义，但仍无法在IE11上使用。

HTML：

<a href="https://www.facebook.com/tp/" class="facebook-link">
   <i class="icon t-facebook"></i>
</a>

CSS：

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

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'tp-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-facebook:before {
  content: "\e905";
}

有什么想法吗？如果我将.t-facebook:before的内容部分从“\ e905”更改为“X”或其他内容，即使在IE11中也是如此。

编辑：我想出来，如果我注释掉

 -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";

部分，它也适用于IE11。有趣的是因为IE11应该兼容这些...

InternetExplorer 11自定义unicode字符将不会显示

0 个答案: