[英]External Font on HTML5 Canvas
我完全不知道如何更改我在 canvas 上繪制文本時使用的字體。以下是我在 CSS 中定義的字體:
@font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
現在在我的 HTML/JavaScript 中我很想說:
context.font = '30px "Officina"';
但這不起作用。 如果我使用 web 可用字體(如 Arial),它工作正常,當我直接將純文本直接寫入網頁時,Officina 字體顯示正常。 我錯過了什么?
要獲得跨瀏覽器兼容性,您應該使用CSS作為嵌入字體,如下所示:
@font-face {
font-family: 'BankGothicMdBTMedium';
src: url('bankgthd-webfont.eot');
src: local('BankGothic Md BT'), local('BankGothicBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontNgZtDOtM') format('svg');
font-weight: normal;
font-style: normal;
}
注意:我在http://fontsquirrel.com上的某處獲得了這些字體文件
這對我有用,但我也在HTML標記中使用這個字體,所以也許一個解決方法(如果字體 - 面定義沒有幫助)可以在一些隱藏的div
使用該字體,當然我正在運行身體加載后的所有JS。
您可以使用Google Web字體加載器,但這對於許多用途而言相當重量級和/或煩人。 相反,我會推薦Jennifer Simonds的FontDetect庫 ,可以在GitHub上找到:
一個JavaScript類,可用於確定webfont是否已加載,元素正在使用哪種字體,或對webfont加載(或無法加載)做出反應。
對於大約2017年以后出現這個問題的人來說,最好使用由Google和Typekit共同制作的Web Font Loader: - https://github.com/typekit/webfontloader
這是以前的問題應該對你有幫助。 使用@ font-face將文本繪制到<canvas>在第一次時不起作用
在 canvas 中使用它之前,您可以使用FontFace API加載 fonts:
// new FontFace(familyName, fontSrc, descriptorOnly)
const myFont = new FontFace('My Font', 'url(https://myfont.woff2)');
myFont.load().then((font) => {
document.fonts.add(font);
console.log('Font loaded');
});
首先下載字體資源myfont.woff2。 下載完成后,字體將添加到文檔的 FontFaceSet 中。
FontFace API 的規范是撰寫本文時的工作草案。 請在此處查看瀏覽器兼容性表。
然后,您可以使用字體參數來設置您的字體系列。
var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
ctx.drawImage(this, 0,0,this.width, this.height);
ctx.font = '68px KulminoituvaRegular';
ctx.fillStyle = 'orangered';
ctx.textBaseline = 'top';
ctx.fillText ('Keyboard Cat', 0, 270);
};
筆記:
您可以簡單地使用“@font-face”CSS 加載您的字體,但請記住,在您使用 canvas 繪圖之前,您的字體必須加載到文檔中。
你所有的 fonts 和圖片(實際上是所有資源)應該而且必須是同源的或者啟用 cors-origin ,否則大多數瀏覽器會拒絕 .network 請求。
使用此技巧並將onerror
事件綁定到Image
元素。
在這里演示: http : //jsfiddle.net/g6LyK/ - 適用於最新的Chrome。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow';
document.getElementsByTagName('head')[0].appendChild(link);
// Trick from https://stackoverflow.com/questions/2635814/
var image = new Image;
image.src = link.href;
image.onerror = function() {
ctx.font = '50px "Vast Shadow"';
ctx.textBaseline = 'top';
ctx.fillText('Hello!', 20, 10);
};
如何嘗試將您的網址作為字符串:
@font-face{
font-family:"Officina";
src:url('OfficinaSansStd-Book.otf');
}
context.font = "30px Officina";
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.