Outils pour utilisateurs

Outils du site

Traductions de cette page?:

fr:template:custom-fonts

Ceci est une ancienne révision du document !


A PCRE internal error occured. This might be caused by a faulty plugin

FIXME **Cette page n'est pas encore traduite entièrement. Merci de terminer la traduction**\\ //(supprimez ce paragraphe une fois la traduction terminée)// ====== Polices personnalisées ====== Les polices personnalisées (//Custom fonts//) sont un champ optionnel du template. On l'ajoute si besoin à la racine de celui-ci, au même niveau que les éléments ''description'' ou ''styles'' : <code javascript> { "styles": [ ], "fonts" : [ ], "description": { } }; </code> Dans le tableau ''fonts'', vous pouvez ajouter autant de polices personnalisées que besoin. Mais qu'est-ce qu'une police personnalisée ? ===== C'est quoi une Police personnalisée ? ===== Une police personnalisée est une police d'écriture que vous désirez être accessible à tout le monde. Parce que parfois, la police utilisée n'est pas une police standard, et que vous ne souhaitez pas proposer à tous les utilisateurs de la télécharger puis de l'installer. Une police personnalisée possède deux propriétés : ''fontFamily'' qui renseigne une chaîne identifiant la police, et ''url'' qui correspond au fichier de la police. <code javascript> { "styles": [ ], "fonts" : [ { "fontFamily": "MyFontFamily", "src": "url" } ], "description": { } }; </code> L'utilisation des polices personnalisées va suivre l'utilisation des [[http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp|font-face CSS]]. ===== Fichier et URL ===== Si vous hébergez **geckos**, vous pouvez également héberger votre Police le même serveur, et définir un chemin relatif vers celle-ci dans votre URL : <code javascript> { "fontFamily": "MyFontFamily", "src": "fonts/myFont.woff" } </code> Il est aussi possible d'utiliser une URL distante, mais cela peut entraîner quelques soucis (serveur distant HS, serveur distant refusant la connexion, pare-feu bloquant l'accès au serveur, changement d'arborescence sur le serveur, ...). <code javascript> { "fontFamily": "MyFontFamily", "src": "http://www.fonts.com/myFont.woff" } </code> Enfin, comme c'est déjà le cas pour les images, on peut s'appuyer sur la [[Dataurl-Variables|DataUrl]] d'un fichier de police. Quelques explications, en anglais, se trouvent sur [[http://sosweetcreative.com/2613/font-face-and-base64-data-uri|SoSweetCreative]], mais en bref, l'objectif est identique à celui recherché pour les images : traduire le fichier en une chaîne de caractères, intégrée dans le code du template, et toujours accessible à l'utilisateur. <code javascript> { "fontFamily": "MyFontFamily", "src": "data:application/octet-stream;base64,T1RUTw......" } </code> Par exemple, le template pour [[https://github.com/Gulix/geckos/blob/master/templates/wquest-silvertower-herocard.json|Warhammer Quest - Silver tower]] utilise une police intégrée via DataUrl. ===== FontFamily ===== La propriété ''fontFamily'' est une chaîne qui identifie la police. Il vaut mieux y éviter les espaces et les caractères spéciaux. Cet identifiant peut suivre le nom original de la police, mais rien ne l'y oblige. Ce nom sera utilisé par votre template pour afficher du texte avec cette police. Tout élément de type ''Text'', ''Textbox'' ou autre pouvant afficher du texte dans le canvas peut utiliser cette police : <code javascript> { "type": "textbox", "left": 0, "top": 0, "width": 100, "text": "$name", "fontFamily": "MyFontFamily" }, </code> Et c'est ainsi qu'on utilise des **Polices personnalisées** dans **Geckos** ! ===== Option - le Style ===== La police que vous venez d'ajouter est intégrée à la page web en tant que police //Régular//. Cela signifie que vous pouvez utiliser cette police pour afficher du texte standard (pas italique). Et si on veut afficher du texte en italique ? Si votre police n'est utilisée que sous sa forme italique, vous pouvez utiliser le fichier de la version italique en tant que source (''src'') et l'utiliser directement. Pas besoin alors de mentionner dans les objets de texte que vous utilisez un style italique, il sera directement appliqué. Si vous envisagez d'utiliser votre police à la fois en style régulier et en italique, alors cela ne fonctionnera pas. Il vous faut deux **polices personnalisées** : une pour le style régulier, une pour l'italique : <code javascript> "fonts" : [ { "fontFamily": "MyFontFamily", "src": "data:application/octet-stream;base64,T1RUTw......" }, { "fontFamily": "MyFontFamily", "fontStyle": "italic", "src": "data:application/octet-stream;base64,T1RUTw......" } ] </code> La propriété ''src'' pour la version italique doit être le fichier en mode italique de la police. Ou bien une autre police ? Et bien oui ! En tant que créateur de template, vous pouvez expérimenter avec cette fonctionnalité ! Il est facile de mixer deux polices différentes au sein d'un [[Rich_Text_Field|Champ Texte Riche]] en liant l'une d'entre-elles au style italique. ==== What about the bold ? ==== The bold version of a font is sometimes a different file as well. For the moment, **Geckos** don't use that possibility of using specific //bold version// of a font file, but instead render bold text automatically. It could be a later addition to the software.

fr/template/custom-fonts.1472729048.txt.gz · Dernière modification: 2016/09/01 13:24 par Nicolas Ronvel