帆布希臘谷歌字體不能正確渲染

我認爲這是一個錯誤，但如果你有任何人知道任何工作，請讓我知道。帆布希臘谷歌字體不能正確渲染

首先，字體加載101％。

我加載谷歌字體同步
我與間隔檢查，以確保該字體被加載。
我用帆布成功將字符串轉換成圖像（以下功能）（當我用英文字符）
呈現幾個英文字符後，我嘗試呈現一個希臘字但是畫布會回退到瀏覽器的默認字體。
Firefox根本沒有任何問題，它的效果很好。 Chrome的問題是。

婁是，從給定的字符串創建在左上角的帶狀標籤背景圖像的功能（PS：正在與其他的imageData稍後合併此函數返回的imageData）：

ImageProcessor.prototype.createLabelImageData = function (str, size, font, color, backgroundColor, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, width, height) { 

    this.canvas.width = width || this.settings.width; 
    this.canvas.height = height || this.settings.height; 
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 

    this.ctx.font = "Bold " + (size || 64) + "px " + (font || "Arial"); 
    this.ctx.textAlign = "center"; 
    this.ctx.textBaseline = "middle"; 

    var labelHeight = (size || 64) + ((size || 64)/4); 
    var labelTop = this.canvas.height/2 - labelHeight/2; 
    var labelWidth = this.canvas.width; 

    var strLen = this.ctx.measureText(str + " ").width; 
    var side = Math.sqrt((strLen * strLen)/2); 
    var distance = Math.sqrt((side * side) - ((strLen/2) * (strLen/2))); 

    this.ctx.save(); 
    this.ctx.rotate(-Math.PI/4); 
    this.ctx.translate(-this.canvas.width/2, -this.canvas.height/2 + distance); 

    this.ctx.fillStyle = (backgroundColor || '#f00'); 
    this.ctx.beginPath(); 
    this.ctx.moveTo(0, labelTop); 
    this.ctx.lineTo(labelWidth, labelTop); 
    this.ctx.lineTo(labelWidth, labelTop + labelHeight); 
    this.ctx.lineTo(0, labelTop + labelHeight); 
    this.ctx.closePath(); 
    this.ctx.fill(); 

    if (shadowColor) { 

     this.ctx.shadowColor = shadowColor; 
     this.ctx.shadowOffsetX = (shadowOffsetX || 0); 
     this.ctx.shadowOffsetY = (shadowOffsetY || 0); 
     this.ctx.shadowBlur = (shadowBlur || size || 64); 

    } 

    this.ctx.fillStyle = (color || "#fff"); 
    this.ctx.fillText(str, this.canvas.width/2, this.canvas.height/2); 
    this.ctx.restore(); 

    var imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); 

    this.canvas.width = this.settings.width; 
    this.canvas.height = this.settings.height; 

    return imageData; 

};

來源

2015-02-11 Syd

後好了一些測試，試驗和錯誤和許多許多小時的閱讀...

我發現，如果當你想在畫布上使用的字體已經被下載了也沒關係。在做任何事之前什麼對我有效，並且任何檢查都會創建n * 2個div元素（n個加載的字體數）並將它們放置在視圖端口之外。 n * 2因爲在一些我加入font-weight:bold。

底線是，你想在畫布上使用完全相同的字體必須是：

預裝
建立在我的案件與所有語言變化innerHTML的文本虛擬DOM元素（拉丁語&希臘）。

保持在中間，你必須爲字體的粗體變化創建額外的元素。

這是我目前使用的預加載字體的代碼，並確保它們在畫布中可用。

Vise.prototype.initializeFonts = function (settings, globalCallback) { 



    var that = this; // reference to parent class 



    /******************************************** 
    ******************************************** 
    ** 
    ** 
    **  Default settings 
    ** 
    ** 
    ******************************************** 
    ********************************************/ 



    var defaults = { 
     interval: 100, 
     timeout: 10000, 
     families: [ 
      'Open+Sans+Condensed:300,300italic,700:latin,greek', 
      'Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800:latin,greek', 
      'Roboto+Condensed:300italic,400italic,700italic,400,700,300:latin,greek', 
      'Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic:latin,greek' 
     ] 
    }; 

    // initialization 

    this.fonts = new Fonts($.extend(true, defaults, settings)); 
    this.fonts.onload = globalCallback; 
    this.fonts.load(); 

}; 



/******************************************** 
******************************************** 
** 
** 
**  Fonts class 
** 
** 
******************************************** 
********************************************/ 



function Fonts(settings) { 

    this.settings = settings; 
    this.success = []; 
    this.fail = []; 
    this.interval = null; 
    this.elapsedTime = this.settings.interval; 
    this.fontDetective = new Detector(); 

} 

Fonts.prototype.load = function() { 

    WebFont.load({ 
     google: { 
      families: this.settings.families 
     } 
    }); 

    for (var i in this.settings.families) { 

     var el, elBold; 
     var familyStr = this.settings.families[ i ]; 
     var family = familyStr.split(':')[ 0 ].replace(/[+]/gi, ' '); 

     el = document.createElement("div"); 
     el.innerHTML = "Font loader Φόρτωμα γραμματοσειράς"; 
     el.style.fontFamily = family; 
     el.style.color = "#f00"; 
     el.style.position = "fixed"; 
     el.style.zIndex = 9999; 
     el.style.left = "9999px"; 
     document.body.appendChild(el); 

     elBold = document.createElement("div"); 
     elBold.innerHTML = "Font loader Φόρτωμα γραμματοσειράς"; 
     elBold.style.fontFamily = family; 
     elBold.style.fontWeight = "bold"; 
     elBold.style.color = "#f00"; 
     elBold.style.position = "fixed"; 
     elBold.style.zIndex = 9999; 
     elBold.style.left = "9999px"; 
     document.body.appendChild(elBold); 

    } 

    this.interval = setInterval(this.areLoaded.bind(this), this.settings.interval); 

}; 

Fonts.prototype.areLoaded = function() { 

    for (var i in this.settings.families) { 

     var familyStr = this.settings.families[ i ]; 
     var family = familyStr.split(':')[ 0 ].replace(/[+]/gi, ' '); 
     var successIdx, failIdx; 

     if (this.fontDetective.detect(family)) { 

      successIdx = this.success.indexOf(family); 
      failIdx = this.fail.indexOf(family); 

      if (successIdx === -1) { 
       this.success.push(family); 
       console.log("[" + family + "] was successfully loaded."); 
      } 

      if (failIdx > -1) { 
       this.fail.splice(failIdx, 1); 
      } 

     } else { 

      successIdx = this.success.indexOf(family); 
      failIdx = this.fail.indexOf(family); 

      if (successIdx > -1) { 
       this.success.splice(successIdx, 1); 
      } 

      if (failIdx === -1) { 
       this.fail.push(family); 
      } 

     } 

    } 

    if (this.elapsedTime >= this.settings.timeout) { 

     clearInterval(this.interval); 

     var err = new Error("Unable to load fonts: " + this.fail.toString()); 

     this.onload(err, null); 

     return; 
    } 

    if (this.success.length === this.settings.families.length) { 

     clearInterval(this.interval); 

     this.onload(null, null); 

     return; 
    } 

    this.elapsedTime += this.settings.interval; 

};

這是什麼爲我工作，以防別人在鉻上遇到同樣的問題。

PS：看看我在我的代碼中使用的fontdetect.js。

來源

2015-02-11 22:22:06 Syd

帆布希臘谷歌字體不能正確渲染

回答

相關問題