Changer la taille de police de la Toile sans connaître famille de polices

Est-il un moyen de seulement changer la police la taille d'une toile contexte sans avoir à connaître d'écriture/de la famille de polices.

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

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

Remarque:

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

Autre remarque: je peux faire quelque chose comme: détecter où " px "est, de supprimer ce qui est avant le" px " et de la remplacer par ma taille de police. Mais j'aimerais quelque chose de plus facile que cela, si possible.

OriginalL'auteur RainingChain | 2013-08-07

  1. 6

    Mise à jour: (de commentaires) Il n'y a pas moyen de contourner la spécification de la police. La Toile de police est calqué sur le court de main la version de la police en CSS.

    Cependant, il y a toujours un jeu de polices sur la toile (ou une police type), de sorte que vous pouvez faire est tout d'abord l'extraire de la police de caractères courante en l'utilisant comme ceci:

    var cFont = ctx.font;

    Alors de remplacer la taille de l'argumentation et de la définir (à noter qu'il y a peut être un paramètre de style, il y a l').

    Un simple split pour exemple:

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

    Vous aurez besoin d'aide pour le style si nécessaire (IIRC il s'agit d'abord si elle est utilisée).
    Notez que la taille de police est à la quatrième paramètre, donc cela ne fonctionnera pas si vous n'avez pas la propriété font-variant(gras,italique,oblique), font-variant(normal, small-caps) et la police-poids(en gras, etc).

    Vous êtes en train de faire ce que j'ai mentionné dans mon Autre remarque:
    Je suis peut-être aveugle, mais où voulez-vous montrer?
    il n'y a pas moyen de contourner la spécification de la police. La Toile de police est calqué sur le court de main la version de la police en CSS.
    semble stupide que vous ne pouvez pas spécifier la police des accessoires individuellement 🙁
    Cette réponse ne prend pas en compte les noms de polices qui contiennent des espaces, comme sakkal majalla ou Times New Roman etc. Le fractionnement de l'espace permettra d'obtenir un tableau contenant la taille de la police, plus que beaucoup de mots comme le nom de la police, chacun à un élément

    OriginalL'auteur

  2. 11

    Ici est plus simple et plus propre façon de changer la taille de police qui fonctionne peu importe si vous utilisez font-variant ou font-weight ou pas.

    En supposant que votre nouvelle taille de la police est 12px

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

    Ou une belle doublure si vous voulez augmenter de 2 points:

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

    OriginalL'auteur MacroMan

  3. 2

    À répondre correctement à votre question, il n'y a aucun moyen de changer la taille de police d'une toile contexte sans avoir à connaître d'écriture/de la famille de polices.

    OriginalL'auteur PHPglue

  4. 0

    essayez ceci (à l'aide de 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;
    Bonne idée. Pas besoin d'ajouter de corps, ni de l'utilisation de jQuery. var span = document.createElement('span'); span.style.font = ctx.font; return span.style.fontSize;

    OriginalL'auteur Oscarlito Allentot