我正在研究用于延迟加载字体并在 fabric.js Canvas 上使用的解决方案。我以 woff 格式托管自定义字体,并使用 WebFont 加载程序在选择框的更改事件中加载它们,如下所示:
$fontSelect.change(function() {
const [font] = $(this).select2('data');
if (font) {
FontLoader.load(font.url, font.text)
.then(() => {
editorObject.setFontFamily(font.text);
}, () => {
console.log('error while loading font');
});
}
});
FontLoader.load 方法如下所示:
private static loadCustomFont(name: string, url: string, callback: Function, errorCallback: Function): void {
if (this.loadedFonts.indexOf(name) !== -1) {
callback();
return;
}
const markup = `
@font-face {
font-family: '${name}';
font-style: normal;
font-weight: normal;
src: local('${name}'), url('${url}') format('woff');
}
`;
let style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = markup;
document.head.appendChild(style);
WebFont.load({
custom: {
families: [
name
]
},
active: () => {
callback();
},
inactive: () => {
errorCallback();
}
});
}
大多数字体都可以正常工作,但其中一些字体以下列方式呈现:
有问题的字体是 Dumbledore 3。它可以在 dafont.com 上免费获得。
奇怪的是,当我转到开发工具并在 css 中的某些元素上指定 font-family 时,字体显示正确。
其他有问题的字体之一也是 Disco Duck 3D。
有什么想法吗?
最佳答案
问题出在字体名称上。 字体名称被传递给 ctx.font api,字体名称中的数字被误认为是字体大小
尝试像这样将字体传递给 fabric.js
fontFamily = '"Disco Duck 3D"';
你应该没事
关于javascript - Fabric.js 一些自定义字体以非常小的尺寸和错误的字体呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48855391/