Geckos Documentation

Ceci est une ancienne révision du document !

---

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. ===== The FontFamily ===== The ''fontFamily'' property is a String that represents the name of the font. It's better with no spaces or funky characters. This name could follow the original one of the font, but it's not mandatory. It's now the name that your template will use in order to display text with that font. Any ''Text'', ''Textbox'' or similar fields you will use in the Canvas can use that font : <code javascript> { "type": "textbox", "left": 0, "top": 0, "width": 100, "text": "$name", "fontFamily": "MyFontFamily" }, </code> That's how you use **Custom fonts** in **Geckos** ! ===== Optional - The Font Style ===== The font you just added is added to the webpage as a //Regular// font. It means you can use that font to display regular text (ie not italic). But what if you want to display italic text ? If your font is only meant to be used in italic, you can set the italic version of the font as the ''src'' and use it. It will work just fine. If you plan to use your font in both regular and italic version, it will not work this way. Instead, you need to add two **custom fonts** : one for the regular style, one for the italic : <code javascript> "fonts" : [ { "fontFamily": "MyFontFamily", "src": "data:application/octet-stream;base64,T1RUTw......" }, { "fontFamily": "MyFontFamily", "fontStyle": "italic", "src": "data:application/octet-stream;base64,T1RUTw......" } ] </code> The ''src'' part of the italic font need to be the italic version file of the font. Or another font ? Yes, it's up to you, template creator, to play with this ! For example, you could mix two totally different fonts inside a [[Rich-Text-Field|Rich Text field]] by setting one to the Italic mode. ==== 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.