IE11 无法加载字体

Question

我试图弄清楚为什么我的文章正文部分没有加载字体。这只发生在 Internet Explorer 中。

示例文章：https://outline.com/zzsgGV

我从中获取：https://outline.com/css/outline.css，并通过以下对字体的调用。我已经添加了 .eot 调用并且文件都可用了。

一些可能的理论

":root" 在 IE11 中不受支持

IE11 不支持字体变量

@font-face{
    font-family:'Adobe Garamond Pro Bold';
    src:url(../fonts/AGaramondPro-Bold.eot);
    src:url(../fonts/AGaramondPro-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-Bold.woff) format('woff'),url(../fonts/AGaramondPro-Bold.ttf) format('truetype'),url(../fonts/AGaramondPro-Bold.svg#3ba63f82a1b13c399d199d455e95ce26) format('svg');
    font-style:normal;
    font-weight:700
}
@font-face{
    font-family:'Adobe Garamond Pro Bold';
    src:url(../fonts/AGaramondPro-BoldItalic.eot);
    src:url(../fonts/AGaramondPro-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-BoldItalic.woff) format('woff'),url(../fonts/AGaramondPro-BoldItalic.ttf) format('truetype'),url(../fonts/AGaramondPro-BoldItalic.svg#fc87d529a9b2a903681f36cd7c9d9a39) format('svg');
    font-style:italic;
    font-weight:700
}
@font-face{
    font-family:'Adobe Garamond Pro';
    src:url(../fonts/AGaramondPro-Italic.eot);
    src:url(../fonts/AGaramondPro-Italic.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-Italic.woff) format('woff'),url(../fonts/AGaramondPro-Italic.ttf) format('truetype'),url(../fonts/AGaramondPro-Italic.svg#e62a4d531f55b2f8bdfd398331ec8604) format('svg');
    font-style:italic;
    font-weight:400
}
@font-face{
    font-family:'Adobe Garamond Pro';
    src:url(../fonts/AGaramondPro-Regular.eot);
    src:url(../fonts/AGaramondPro-Regular.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-Regular.woff) format('woff'),url(../fonts/AGaramondPro-Regular.ttf) format('truetype'),url(../fonts/AGaramondPro-Regular.svg#1eabc8b27c1d378ed9b1f5dd58b5095c) format('svg');
    font-style:normal;
    font-weight:400
}
:root{
    --base-font-weight:400;
    --base-font-size:22px/1.62;
    --sys-font-family:"Adobe Garamond Pro","Georgia","Times New Roman",Times,serif;
    --zh-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Droid Sans","Helvetica Neue","PingFang SC","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;
    --sub-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Droid Sans","Helvetica Neue","PingFang SC","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;
    --base-font-family:var(--sys-font-family),var(--zh-font-family);
    --code-font-family:Menlo,Monaco,Consolas,"Courier New";
    --base-color:#444443;
    --emphasis-color:#222223;
    --link-color:#0985ce;
    --link-hover-color:#0985ce;
    --figure-color:#666665;
    --blockquote-color:#666664;
    --code-color:#808080;
    --pre-code-color:#4c4c4c
}

Answer 1

Internet Explorer 11 不支持 CSS 变量。

Browser support (caniuse.com)