"Impact"字体在移动版Chrome上无法使用

Question

我已经苦恼了一年以上的Impact字体。

它应该是网页安全字体，但实际上却不是。

如果我使用标准的"Impact"字体，在移动平台上将无法工作。如果我使用特定的字体@font-face，就很难在PC和Mac上获得相同的渲染效果（我尝试了大约20个不同版本，并花费了约200美元购买了无用的字体）。

我对标准的Impact感到满意，因为它可以正常工作（需要进行一些hack）。但是它不能在手机上（Chrome浏览器）加载，这让我疯狂，想跳出窗口。真的，我受够了...

- 2famous.TV

---

请不要因为字体的问题而自我毁灭，这并不值得！ - Luke

Answer 1

请看这个 fiddle → https://jsfiddle.net/yakunins/8e56vdy7/

* {
  font-family: Impacto, Impact, sans-serif;
}
@font-face {
  font-family: Impacto;
  font-weight: bold;
  src: url(data:font/ttf;base64,AAEAAAAXAQ...);
}

我在我的Android设备上得到了这个结果：

该图展示了在Chrome移动版中，使用一些CSS属性后的页面效果。

- yakunins

Answer 2

TL;DR: 没有所谓的“网页安全字体”

这个术语起源于移动设备之前的时代：
当然，像 Impact 这样的字体在几乎所有的 Microsoft 或 Apple 操作系统上都可用。
大多数 Linux 发行版也不会预先安装它们（尽管您应该能够按照此处描述的步骤在 Ubuntu 20.04 上安装它们：安装 Microsoft 字体）。

解决方法

1. 检查字体是否可用document.fonts.check()
2. 如果没有：使用异步FontFace.load()函数加载替代字体（在本例中为Vernon Adams "Anton"）
3. 字体已安装？ - 跳过字体加载

let fonts = [
{
    // Inter as replacement
    'font-family': 'Helvetica',
    'font-style': 'normal',
    'font-weight': 400,
    'src': 'https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2'
  },
  {
    // Load Anton  as replacement
    "font-family": "Impact",
    "font-style": "normal",
    "font-weight": 400,
    src: "https://fonts.gstatic.com/s/anton/v23/1Ptgg87LROyAm3Kz-C8.woff2"
  }
];

let fontsToLoad = checkFontAvailability(fonts);
loadFonts(fontsToLoad)

function checkFontAvailability(fonts) {
  let info = [];
  let fontsToLoad = [];
  if (fonts.length) {
    fonts.forEach(function(font) {
      let fontFamily = font["font-family"];
      let fontApplied = document.fonts.check(`12px ${fontFamily}`);
      if (!fontApplied) {
        fontsToLoad.push(font);
      }
    });
    if (!fontsToLoad.length) {
      console.log('all fonts available!')
    }
  }
  return fontsToLoad;
}

async function loadFonts(fontsToLoad) {
  if (fontsToLoad.length) {
    for (let i = 0; i < fontsToLoad.length; i++) {
      let fontProps = fontsToLoad[i];
      let fontFamily = fontProps["font-family"];
      let fontWeight = fontProps["font-weight"];
      let fontStyle = fontProps["font-style"];
      let fontUrl = Array.isArray(fontProps["src"]) ?
        fontProps["src"][0][0] :
        fontProps["src"];
      if (fontUrl.indexOf("url(") === -1) {
        fontUrl = "url(" + fontUrl + ")";
      }
      let fontFormat = fontProps["src"][0][1] ? fontProps["src"][1] : "";
      const font = new FontFace(fontFamily, fontUrl);
      font.weight = fontWeight;
      font.style = fontStyle;
      await font.load();
      document.fonts.add(font);
      console.log(fontFamily, "loaded");

      // apply font styles to body
      let fontDOMEl = document.createElement("div");
      fontDOMEl.textContent = "";
      document.body.appendChild(fontDOMEl);
      fontDOMEl.setAttribute(
        "style",
        `position:fixed; height:0; width:0; overflow:hidden; font-family:${fontFamily}; font-weight:${fontWeight}; font-style:${fontStyle}`
      );
    }
  }
}

@font-face {
  font-family: 'ImpactLookalike';
  font-style: 'normal';
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/anton/v23/1Ptgg87LROyAm3Kz-C8.woff2');
}

.impact {
  font-family: "Impact";
}

.anton {
  font-family: "ImpactLookalike";
}

<h1 class="impact">Impact original</h1>
<h1 class="anton">Impact lookalike (Anton)</h1>

请注意：这些字体不是免费的！
它们是软件产品，因此需要许可证。 购买上述操作系统/产品之一，您将获得桌面许可证 - Android 设备通常不包含此类许可证。

更好的解决方案

坚持使用 Web 字体以确保字体显示一致。

- herrstrietzel