CSS字体系列不适用于IE11

Posted 2023-03-15

【中文标题】CSS字体系列不适用于IE11

【英文标题】：CSS font family not working For IE11

【发布时间】：2018-06-09 17:16:12

【问题描述】：

我有一个IE11 浏览器的问题，它只适用于代码 sn-p，它适用于 Chrome 和 Firefox，但相同的字体在 IE11 中不起作用。

.auction-bid span, .ending-soon, .auction-ending-soon, .upcoming, .mfxr-logo b, a.divider, .btn-purple, .btn-purple-small-font, .btn-white, .btn-green, .btn-dark-grey, .btn-dark, .btn-green-tko, .btn-green-tko:hover, .signed-up.btn-green-tko, .offer_title h2.thin-purple-title, .rewards-offer p b, .reward-progress-amount, .offer-title, .offer-title-entry-tier, .offer-window, .green-ribbon-text, .acct-points-block span.acct-points, .offer_signup, .offer-item-level, .redeem-now, .redeem-now-internal a, .offer_signup_bundle, .offer-detail-message-block p.offer-message-title, .hero-content-entry-tier-benefits p.hero-title-entry-tier-benefits span, .survey-thank-you, .reward-redemption-tabs li a, .survey-thank-you 
    font-family: "UniversLTW01-67BoldCn",sans-serif;

@字体脸 font-family:"UniversLTW10-67BoldCn"; SRC：URL（ “？/ DV2 / 2 / de8453e9-b2a6-4554-bf75-5f0ff5a2e236.eot d44f19a684109620e484167fa390e818aaaef8109cdd42fe911f1f1944c6f755a6c53f937307a632adec70e34a75cd22651a8e1008fa43d859bf3de6be050b80b709b7a19da8b96167c1578bb3b05eadc5fd0e350ff478daa9c402204f281d80cfc0935138fc83c0e8eeb68a5a2267682e568bae5815045f54673e724b6599de16c3819b621efebae255a555e88ef744058b5c37c26ff2e0f1bd4a0dad36945fa7b5ba0f9cf71479f8c9ec8db5688ff4a22b78ba2206f1d5076f240b98d5d23d7395b1b09565b1cdbe3ab7add707b6728c91aa5375a6fad9fbb044dc9a5bb0d34ebeeaa5a612e4611e976dcb04dfc0715a9d11fdd0c87dd59fe2f2f28065b72267bfd2d2e3b041ce＆专案编号= a8cd6cbf-61a3-40a6-bb81-11a6b6b11eb5＃iefix”）; src:url("/dv2/2/de8453e9-b2a6-4554-bf75-5f0ff5a2e236.eot?&projectId=a8cd6cbf-61a3-40a6-bb81-11a6b6b11eb5#iefix") 格式("eot"),url("/dv2/ 14 / edd7b84c-1937-4bbd-a9cd-e19c35f19b6b.woff2？d44f19a684109620e484167fa390e818aaaef8109cdd42fe911f1f1944c6f755a6c53f937307a632adec70e34a75cd22651a8e1008fa43d859bf3de6be050b80b709b7a19da8b96167c1578bb3b05eadc5fd0e350ff478daa9c402204f281d80cfc0935138fc83c0e8eeb68a5a2267682e568bae5815045f54673e724b6599de16c3819b621efebae255a555e88ef7440 58b5c37c26ff2e0f1bd4a0dad36945fa7b5ba0f9cf71479f8c9ec8db5688ff4a22b78ba2206f1d5076f240b98d5d23d7395b1b09565b1cdbe3ab7add707b6728c91aa5375a6fad9fbb044dc9a5bb0d34ebeeaa5a612e4611e976dcb04dfc0715a9d11fdd0c87dd59fe2f2f28065b72267bfd2d2e3b041ce＆专案编号= a8cd6cbf-61a3-40a6-bb81-11a6b6b11eb5 “）格式（” woff2 “），URL（”/ DV2 / 3 / e6c2f397-706a-4224-9c0a-069effd9da88.woff？＆专案编号= a8cd6cbf-61a3-40a6-bb81- 11a6b6b11eb5") 格式("woff"),url("/dv2/1/528d0fca-b028-48b5-8003-f010575e8949 .TTF？d44f19a684109620e484167fa390e818aaaef8109cdd42fe911f1f1944c6f755a6c53f937307a632adec70e34a75cd22651a8e1008fa43d859bf3de6be050b80b709b7a19da8b96167c1578bb3b05eadc5fd0e350ff478daa9c402204f281d80cfc0935138fc83c0e8eeb68a5a2267682e568bae5815045f54673e724b6599de16c3819b621efebae255a555e88ef744058b5c37c26ff2e0f1bd4a0dad36945fa7b5ba0f9cf71479f8c9ec8db5688ff4a22b78ba2206f1d5076f240b98d5d23d7395b1b09565b1cdbe3ab7add707b6728c91aa5375a6fad9fbb044dc9a5bb0d34ebeeaa5a612e4611e976dcb04dfc0715a9d11fdd0c87dd59fe2f2f28065b72267bfd2d2e3b041ce＆专案编号= a8cd6cbf-61a3-40a6-bb81-11a6b6b11eb5 “）格式（” TrueType字体 “），URL（”/ DV2 / 11 / c52f6cb2-23c6-46b1-b6c5-e0a1da3e577c.svg？d44f19a684109620e484167fa390e818aaaef8109cdd42fe911f1f1944c6f755a6c53f937307a632adec70e34a75cd22651a8e1008fa43d859bf3de6be050b80b709b7a19da8b96167c1578bb3b05eadc5fd0e350ff478daa9c402204f281d80cfc0935138fc83c0e8eeb68a5a2267682e568bae5815045f54673e724b6599de16c3819b621efebae255a555e88ef744058b5c37c26ff2e0f1bd4a0dad36945fa7b5ba0f9cf71479f8c9ec8d b5688ff4a22b78ba2206f1d5076f240b98d5d23d7395b1b09565b1cdbe3ab7add707b6728c91aa5375a6fad9fbb044dc9a5bb0d34ebeeaa5a612e4611e976dcb04dfc0715a9d11fdd0c87dd59fe2f2f28065b72267bfd2d2e3b041ce＆专案编号= a8cd6cbf-61a3-40a6-bb81-11a6b6b11eb5＃c52f6cb2-23c6-46b1-b6c5-e0a1da3e577c “）格式（” SVG“）;

【问题讨论】：

您使用的是谷歌字体吗？或者你的@font-face 在哪里？

我认为我们没有使用 Google 字体，我无法在我的应用程序中找到 UniversLTW01-67BoldCn 的 @font-face

@TimGerhard，为什么你太担心大型 css 选择器？尝试专注于问题。

【参考方案1】：

Add @font-face 
.auction-bid span, .ending-soon, .auction-ending-soon, .upcoming, .mfxr-logo b, a.divider, .btn-purple, .btn-purple-small-font, .btn-white, .btn-green, .btn-dark-grey, .btn-dark, .btn-green-tko, .btn-green-tko:hover, .signed-up.btn-green-tko, .offer_title h2.thin-purple-title, .rewards-offer p b, .reward-progress-amount, .offer-title, .offer-title-entry-tier, .offer-window, .green-ribbon-text, .acct-points-block span.acct-points, .offer_signup, .offer-item-level, .redeem-now, .redeem-now-internal a, .offer_signup_bundle, .offer-detail-message-block p.offer-message-title, .hero-content-entry-tier-benefits p.hero-title-entry-tier-benefits span, .survey-thank-you, .reward-redemption-tabs li a, .survey-thank-you 
    font-family: "UniversLTW01-67BoldCn",sans-serif;

【讨论】：

@font-face 需要一个src 元素并且没有类说明符和一个单个姓氏。正确的格式是：@font-face font-family: nameToUseInCss; src: url(something.woff); 。此外，这不是 OP 需要的，看起来 OP 有字体但不能在 IE 中使用。