[英]detect bold and italic support
有些字體不支持CSS斜體或粗體(例如, Zapfino不支持斜體,因為它已經非常具有腳本效果)。 我想檢測何時不支持字體樣式,因此我可以在編輯器中禁用樣式按鈕。
我試過的東西像這樣 :
that.checkFontData = function( fontList )
{ var test = $("<span style='font-size:24px;absolute;visibility:hidden;height:auto;width:auto;white-space:nowrap;'>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910</span>");
$('body').append( test );
for (var i= 0, iMax = fontList.length; i < iMax; ++i)
{ test.css( 'fontFamily', fontList[i] );
var normalWidth = test.outerWidth( true );
var normalHeight = test.outerHeight( true );
test.css( 'fontStyle', 'italic' );
var italicWidth = test.outerWidth( true );
var italicHeight = test.outerHeight( true );
test.css( 'fontStyle', 'normal' );
test.css( 'fontWeight', 'bold' );
var boldWidth = test.outerWidth( true );
var boldHeight = test.outerHeight( true );
console.log( fontList[i] + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth );
}
test.remove( );
};
但它不起作用...許多提供斜體或粗體的字體報告相同的寬度。
接下來,我想用canvas元素來檢測這個,但是,唉,firefox甚至沒有在畫布中呈現斜體文本,所以這就是想法。
你會建議什么?
要檢測粗體和斜體支持,您可以將文本轉換為圖像並進行比較。
做到這一點的方法是:
canvas
見下文 (無需將其附加到DOM) canvas
繪制文字 png
) 關於canvas
:
接下來,我想用canvas元素來檢測這個,但是,唉,firefox甚至沒有在畫布中呈現斜體文本,所以這就是想法。
某些字體在Firefox中的畫布中沒有斜體,因為天然斜體字體不存在。 其他瀏覽器會嘗試偽造(傾斜)字體。
查看jsFiddle (此演示還測試了Google字體Snowburst One
)
function detectBoldItalic(fonts) {
// Create canvas
var canvas = document.createElement('canvas');
canvas.width = 1000;
canvas.height = 30;
var context = canvas.getContext("2d");
var test = {}, results = {};
// Default
context.font = "normal 16px a base case font";
context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
var standard = canvas.toDataURL("image/png");
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Start test
for (var i = 0; i < fonts.length; i++) {
var styles = ["normal", "bold", "italic"];
test[fonts[i]] = {};
results[fonts[i]] = {};
for (var j = 0; j < styles.length; j++) {
// Draw text in canvas
context.font = styles[j] + " 16px " + fonts[i];
context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
// Convert canvas to png
test[fonts[i]][styles[j]] = canvas.toDataURL("image/png");
// Clear canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
if (test[fonts[i]]["normal"] !== standard) {
results[fonts[i]]["bold"] = test[fonts[i]]["normal"] !== test[fonts[i]]["bold"] ? true:false; // Support bold
results[fonts[i]]["italic"] = test[fonts[i]]["normal"] !== test[fonts[i]]["italic"] ? true:false; // Support italic
} else {
results[fonts[i]] = false; // Font does not exist
}
}
return results;
}
console.log(detectBoldItalic(["Arial","Zapfino"]));
我已經在jsFiddle中測試了你的代碼,它確實為Georgia
和Arial
這樣的自然webfonts提供了不同的大小,但是對於像Snowburst One
(Googlefont)這樣的外部加載字體卻沒有。
經過一些研究,我發現對於@font-face
加載的字體,沒有css字體轉換適用。 人們加載@font-face
變體並像這樣應用它們:
body { font-family:"DroidSerifRegular", Georgia, serif; }
h1 {
font-family:"DroidSerifBold", Georgia, serif;
font-weight:normal;
}
em {
font-family:"DroidSerifItalic", Georgia, serif;
font-weight:normal;
font-style:normal;
}
strong em {
font-family:"DroidSerifBoldItalic", Georgia, serif;
font-weight:normal;
font-style:normal;
}
如果您使用的@font-face
字體具有上述示例中的變體,您可能會想出某種命名約定。 然后,您可以通過檢查與后備字體相比的寬度來檢查這些字體是否存在。
test.css('fontFamily', 'sans-serif');
var defaultWidth = test.outerWidth( true );
for (var i= 0, iMax = fontList.length; i < iMax; ++i)
{ test.css( 'fontFamily', fontList[i] + ', sans-serif' );
var normalWidth = test.outerWidth( true );
var normalHeight = test.outerHeight( true );
test.css( 'fontFamily', fontList[i] + 'Italic, sans-serif' );
var italicWidth = test.outerWidth( true );
var italicHeight = test.outerHeight( true );
test.css( 'fontFamily', fontList[i] + 'Bold, sans-serif' );
var boldWidth = test.outerWidth( true );
var boldHeight = test.outerHeight( true );
console.log( "default: "+ defaultWidth + ", " fontList[i] + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth );
}
如果樣式版本的寬度與默認版本相比有所改變,那么它就是“Bingo”!
注意:這不適用於等寬字體,因為所有字符的寬度始終相同。
使用Font.js,您可以更可靠地訪問計算的字體指標。 http://pomax.nihongoresources.com/pages/Font.js
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.