Exemple de texte avancé

Traditionnellement, les familles de polices sont distribuées avec un nombre limité de variantes : un ensemble de graisses, de styles et de largeurs (ainsi que leurs combinaisons) codés en dur, pouvant être sélectionnés en tant que polices autonomes.

Les polices variables vont plus loin dans cette idée. Au lieu de distribuer les variantes de la famille de polices sous forme de fichiers de polices autonomes, une seule police variable peut produire ces variantes (et bien d’autres encore) par interpolation.

Pour ce faire, on définit dans la police ce qu’on appelle des « axes variables » pour des propriétés telles que la largeur, l’inclinaison ou l’épaisseur. L’utilisateur peut choisir parmi des valeurs prédéfinies le long de ces axes ou définir n’importe quelle valeur personnalisée dans la plage prise en charge par la police.

Cet exemple inclut une police variable appelée « Georama » (Copyright 2020 The Georama Project Authors, sous licence OFL 1.1). Elle comporte deux axes variables : l’un pour l’épaisseur et l’autre pour la largeur. En manipulant l’un ou l’autre de ces axes, l’utilisateur peut créer un large éventail de variations du design de la police.

L’exemple illustre comment cela peut être utilisé dans un scénario concret : au démarrage de l’exemple, les extraits de texte débordent des cadres de sélection définis dans la mise en page stricte.

En ajustant la largeur et/ou l’épaisseur, le concepteur visuel peut obtenir des variantes de la police qui s’adaptent parfaitement à la mise en page sans avoir à modifier la taille de la police.

L’exemple assigne des curseurs à chacun des deux axes variables de la police. Il lie ensuite les valeurs des axes variables aux curseurs afin que la police se mette automatiquement à jour lorsque l’utilisateur les modifie.

            font.variableAxes: {
                "wdth": widthSlider.value,
                "wght": weightSlider.value
            }

Les axes variables sont identifiés par leur balise à quatre caractères. Certaines balises, telles que « wdth » et « wght », sont associées par convention à des attributs de police spécifiques (dans ce cas : « width » et « weight », respectivement). Mais la police peut prendre en charge n’importe quel axe, à condition qu’il soit désigné par une balise à quatre caractères. Les informations concernant les axes pris en charge par la police figurent souvent dans son nom de fichier.

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Exemple de projet sur code.qt.io