フォントファミリを知らずにキャンバスのフォントサイズを変更する

Question

フォントファミリを知らない/書き込むことなく、キャンバスコンテキストのフォントサイズのみを変更する方法はありますか？

var ctx = document.getElementById("canvas").getContext("2d"); 

ctx.font = '20px Arial'; //Need to speficy both size and family...  

注：

ctx.fontSize = '12px'; //doesn't exist so won't work... 
ctx.style.fontSize = '20 px' //doesn't exist so won't work... 
         //we are changing the ctx, not the canvas itself 

その他の注記：「PX」はどこ検出「PX」の前に何削除し、私のフォントサイズでそれを置き換える：私のような何かを行うことができます。しかし、可能ならば、それよりも簡単なことがあります。

Answer 1

更新:(コメントから）フォントを指定する方法はありません。 Canvasのフォントは、CSSの短いフォントバージョンの後にモデル化されています。

var cFont = ctx.font; 

は次に置き換える：

しかし、キャンバスの上に設定されているフォント（フォントタイプ）ので、あなたが何ができるかを最初に、このようにそれを使用することにより、現在のフォントを抽出することであるが常にありますサイズの引数を取得し、それを元に戻します（スタイルパラメータもそこにあることに注意してください）。

例のために、単純なスプリット：

var fontArgs = ctx.font.split(' '); 
var newSize = '12px'; 
ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1]; /// using the last part 

（IIRC使用している場合、それは最初に来る）必要な場合は、スタイルのサポートが必要になります。フォントサイズは、4番目のパラメータがあるので、あなたはフォントバリアント（太字、斜体、斜め）、フォントバリアント（通常、スモールキャップ）とフォントの太さ（ボールドなどを持っていない/必要があります場合、これは動作しません ていることに注意してください）。

Answer 2

あなたの質問に正しく答えるには、フォントファミリを知らない/書き込まなくてもキャンバスコンテキストのフォントサイズを変更する方法はありません。

Answer 3

フォントバリエーションやフォントウェイトを使用しているかどうかにかかわらず、より簡単で洗練されたフォントサイズを変更できます。あなたは2ポイント増加したい場合は、あなたの新しいフォントサイズを想定すると

は12ピクセル

ctx.font = ctx.font.replace(/\d+px/, "12px"); 

それとも素敵な1つのライナーです：

ctx.font = ctx.font.replace(/\d+px/, (parseInt(ctx.font.match(/\d+px/)) + 2) + "px"); 

Answer 4

は（jqueryのを使用して）、これを試してみてください。

var span = $('<span/>').css('font', context.font).css('visibility', 'hidden'); 
    $('body').append(span); 
    span[0].style.fontWeight = 'bold'; 
    span[0].style.fontSize = '12px'; 
    //add more style here. 
    var font = span[0].style.font; 
    span.remove(); 
    return font;