我已经苦恼了一年以上的Impact字体。
它应该是网页安全字体,但实际上却不是。
如果我使用标准的"Impact"字体,在移动平台上将无法工作。如果我使用特定的字体@font-face,就很难在PC和Mac上获得相同的渲染效果(我尝试了大约20个不同版本,并花费了约200美元购买了无用的字体)。
我对标准的Impact感到满意,因为它可以正常工作(需要进行一些hack)。但是它不能在手机上(Chrome浏览器)加载,这让我疯狂,想跳出窗口。真的,我受够了...
我已经苦恼了一年以上的Impact字体。
它应该是网页安全字体,但实际上却不是。
如果我使用标准的"Impact"字体,在移动平台上将无法工作。如果我使用特定的字体@font-face,就很难在PC和Mac上获得相同的渲染效果(我尝试了大约20个不同版本,并花费了约200美元购买了无用的字体)。
我对标准的Impact感到满意,因为它可以正常工作(需要进行一些hack)。但是它不能在手机上(Chrome浏览器)加载,这让我疯狂,想跳出窗口。真的,我受够了...
请看这个 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设备上得到了这个结果:
这个术语起源于移动设备之前的时代:
当然,像 Impact 这样的字体在几乎所有的 Microsoft 或 Apple 操作系统上都可用。
大多数 Linux 发行版也不会预先安装它们(尽管您应该能够按照此处描述的步骤在 Ubuntu 20.04 上安装它们:安装 Microsoft 字体)。
document.fonts.check()
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 字体以确保字体显示一致。