以下是一個使用 fabric.Text
的示例,展示如何設置這些屬性:
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, Fabric.js!', {
fontSize: 30,
fontWeight: 'bold',
fontFamily: 'Arial',
fontStyle: 'italic',
textAlign: 'center',
lineHeight: 1.5,
charSpacing: 200,
underline: true,
overline: false,
linethrough: false,
textBackgroundColor: 'yellow',
});
canvas.add(text);
除了基本屬性以外,可設置的文字相關屬性
fontSize
: 設置文本的字體大小。
fontWeight
: 設置文本的字體粗細。
fontFamily
: 設置文本的字體家族。
fontStyle
: 設置文本的字體樣式。
textAlign
: 設置文本的對齊方式。
lineHeight
: 設置文本的行高。
charSpacing
: 設置文本的字符間距。
underline
: 設置文本是否顯示下劃線。
overline
: 設置文本是否顯示上劃線。
linethrough
: 設置文本是否顯示刪除線。
textBackgroundColor
: 設置文本的背景顏色。
通常,我們會使用 Web Font 格式,如 .woff 或 .woff2 文件。
@font-face {
font-family: 'MyFont'; //可以叫你想叫的名字
src: url('path/to/your/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
var text = new fabric.Text('Hello, Custom Font!', {
left: 100,
top: 100,
fontFamily: 'MyFont', // 這裡寫你在 @font-face 裡寫的名字
fontSize: 30
});
canvas.add(text);
有時,如果字型文件較大或網絡較慢,可能會導致字型未及時加載。
為了確保字型正確應用,您可以使用 Web Font Loader 庫,它支持非同步加載字體,可以更好地控制網頁字體的加載過程。
Web Font Loader 不負責任 中文翻譯版 - HackMD
//在 HTML 中引入 Web Font Loader:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
然後在 JavaScript 中:
WebFont.load({
custom: {
families: ['MyFont'],
urls: ['path/to/your/font.css']
},
active: function() {
// 字型加載完成後的回調
var text = new fabric.Text('Hello, Custom Font!', {
left: 100,
top: 100,
fontFamily: 'MyFont',
fontSize: 30
});
canvas.add(text);
canvas.renderAll();
}
});
function loadAndUseFont(fontUrl, fontFamily, text) {
var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode(`
@font-face {
font-family: '${fontFamily}';
src: url('${fontUrl}') format('woff2');
}
`));
document.head.appendChild(newStyle);
// 使用 FontFaceObserver 來確保字型加載完成
var font = new FontFaceObserver(fontFamily);
font.load().then(function() {
var fabricText = new fabric.Text(text, {
left: 100,
top: 100,
fontFamily: fontFamily,
fontSize: 30
});
canvas.add(fabricText);
canvas.renderAll();
});
}
// 使用方法
loadAndUseFont('path/to/your/font.woff2', 'MyFont', 'Hello, Dynamic Font!');
!!! 注意,使用自定義字型時要確保有適當的許可或授權,不是你有這個字型檔就可以直接放上來用。
會應應不同情境而有不同的使用範圍,可能的情境舉例:
搜尋「開源字型」,肯定免費!保證可商用!
--- from 剪映、InShot 裡的「免費」字型陷阱:教你避免被告、收取高額罰款 - justfont blog
(更多字型授權的內容可以看 justfont 的文章)
很突然地變成了一個字型版權小教室,一套中文字型的生成很不容易。
本人私底下也是個愛字人,字型的權利真的是需要大家一起來維護🥺💪