Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
fr:template:custom-fonts [2016/08/31 17:22] Nicolas Ronvel créée |
fr:template:custom-fonts [2016/09/01 13:25] (Version actuelle) Nicolas Ronvel |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | 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 ====== | ====== Polices personnalisées ====== | ||
Ligne 35: | Ligne 33: | ||
===== Fichier et URL ===== | ===== Fichier et URL ===== | ||
- | If you host **geckos**, you can add your needed font on you server, and set a relative path to it as the 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 javacript> | + | <code javascript> |
{ "fontFamily": "MyFontFamily", "src": "fonts/myFont.woff" } | { "fontFamily": "MyFontFamily", "src": "fonts/myFont.woff" } | ||
</code> | </code> | ||
- | You can also sets the url to a distant server, but it might sometimes create bugs (server down, firewall preventing access to the server, server path changed, ...). | + | 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 javacript> | + | <code javascript> |
{ "fontFamily": "MyFontFamily", "src": "http://www.fonts.com/myFont.woff" } | { "fontFamily": "MyFontFamily", "src": "http://www.fonts.com/myFont.woff" } | ||
</code> | </code> | ||
- | Finally, as for the images of the canvas, we can use the [[Dataurl-Variables|DataUrl]] of a font file. You can find some explanations of this on [[http://sosweetcreative.com/2613/font-face-and-base64-data-uri|SoSweetCreative]], but the goal is the same as for the images : the font file is translated in a string format, embedded into the template code, and is sure to be present for the user. | + | 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> | <code javascript> | ||
Ligne 53: | Ligne 51: | ||
</code> | </code> | ||
- | See for example the [[https://github.com/Gulix/geckos/blob/master/templates/wquest-silvertower-herocard.json|Warhammer Quest - Silver tower]] template, that uses such a font. | + | 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 ===== | + | ===== 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. | + | 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. |
- | 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 : | + | 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> | <code javascript> | ||
Ligne 65: | Ligne 63: | ||
</code> | </code> | ||
- | That's how you use **Custom fonts** in **Geckos** ! | + | Et c'est ainsi qu'on utilise des **Polices personnalisées** dans **Geckos** ! |
- | ===== Optional - The Font Style ===== | + | ===== Option - le 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 ? | + | 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 ? |
- | 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. | + | 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é. |
- | 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 : | + | 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> | <code javascript> | ||
Ligne 82: | Ligne 80: | ||
</code> | </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. | + | 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 ? ==== | + | ==== Qu'en est-il du gras ? ==== |
- | 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. | + | La version **gras** d'une police est généralement un fichier à part également. Pour l'instant, **Geckos** n'offre pas la possibilité d'utiliser une version spécifique pour le **style gras** d'une police customisée. Le texte en gras est géré automatiquement par le moteur de rendu. Cela pourrait être amené à changer dans le futur. |