fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

lundi 30 juin 2014

Edge Animate, fontes incorporées, sans feuille de style

En complément à l’article sur les fontes incorporées (à relire pour les détails de fonctionnement de cette technique), passons nous de l’étape feuille de style en utilisant les styles « inline ».

Si pour un travail particulier vous souhaitez accéder aux fontes de votre client, qui sont déjà présentes sur son serveur et dont il a la licence, il peut être un peu fastidieux d’ajouter un élément sylesheet.css, surtout s’il ne comporte QUE les polices, et que les autres éléments sont gérés par Animate.

En localisant la feuille de style correspondant chez votre client (souvent dans main.css ou fonts.css), on va retrouver une série d’instructions @font-face sous cette forme :

@font-face{
font-family:’maFonteRegular’;
src:url('../fonts/maFonte_regular_0-webfont.eot');
src:url('../fonts/maFonte_regular_0-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/maFonte_regular_0-webfont.woff') format('woff'),
url('../fonts/maFonte_regular_0-webfont.ttf') format('truetype'),
url('../fonts/maFonte_regular_0-webfont.svg#maFonte_regular_0') format('svg');
font-weight:normal;
font-style:normal;
}

On y retrouve les différents formats de fonte et surtout l'url, qui est « relative » à l'emplacement du fichier css dont elle est extraite.

Ce sont les ../fonts/ de l’url, qu’il faudra alors remplacer par l’adresse absolue de ce répertoire : http://www.monSite.com/style/fonts/ (autant de fois que nécessaire, gagnez du temps sur les remplacements multiples grâce à Brackets)

Il ne vous reste plus qu’à encadrer le tout dans 2 balises <style></style> et à ajouter la police dans Animate, en lui donnant bien le bon nom, et une fonte par défaut (je recommande dans un premier temps la « cursive » : vous voyez tout de suite si votre code échoue avant le chargement de la fonte, à terme, remettez une fonte générique qui correspond mieux, bien sûr).

EgAn-FontesIncorporees-style.png

<style>
@font-face{
font-family:’maFonteRegular’;
src:url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.eot');
src:url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.woff') format('woff'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.ttf') format('truetype'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.svg#maFonte_regular_0') format('svg');
font-weight:normal;
font-style:normal;
}
</style>

Dernière astuce pour finir, si vous devez préparer de nombreuses pages comportant cette fonte, n'oubliez pas de conserver quelques caractères et d'en faire un symbole, Animate vous épargnera la recopie du code !

lundi 22 avril 2013

Utiliser des fontes japonaises WebSafe dans Muse

Pour la création de sites internet, Muse vous propose d'utiliser des polices websafe ou d'intégrer des polices Edge Webfonts. L'utilisation de polices système les convertit en images.

Confronté au besoin de saisir du texte en japonais, je ne me voyais pas me résoudre à utiliser les polices websafe présentes, et pour cause, quelque soit le choix effectué, j'obtenais, pour les katakana/hiragana/kanji la même typo, sérif, beaucoup trop fine pour l'usage qui m'intéressait, et surtout déconnectée de mon choix de sans-sérif de départ.

Mu-JType-Fr-J.png

Or, la bandelette de menu du bas en atteste, j'ai trouvé une astuce pour avoir du texte officiellement choisi parmi les polices web-safe… japonaise.

C'est donc possible, même si indirect : voir ci-dessous pour la méthode.

Lire la suite...

dimanche 17 février 2013

Edge Animate et les fontes incorporées

Si les animations que vous réalisez à l'aide d'Animate sont destinées à être vues hors connexion internet (par exemple, pour un contenu Digital Publishing Suite, dans un magazine sur tablette), il est souhaitable que les polices de caractère utilisées soient incorporées (contrairement aux simples webfonts, histoire d'éviter le désastre visuel…). EgAn-FontesIncorporees-Intro.png

Lire la suite...

samedi 15 septembre 2012

Edge Animate — Polices et point-virgule

Jouons au jeu des 7 différences, en mode plus simple, avec juste 2 différences à noter et une petite subtilité pour que vos fontes fonctionnent correctement dans Adobe Edge Animate

Première image ici, la suivante dans le billet :

SemicolonAfterTypeFallbackFail.gif

Lire la suite...

samedi 12 mai 2012

Adobe Edge et Google Webfonts (v2)

EdgeGoogleWebFOnts.png

  • préparer sa collection dans Google Webfonts ("choose")
  • regarder ce que ça donne dans le panneau "review"
  • copier du code depuis le panneau "use", 1er onglet "standard"
  • coller dans Edge

Et ci dessous, le détail du pourquoi de ces bouts de fontes là et les explications si comme moi vous vous êtes retrouvés coincés entre janvier et mai.

Lire la suite...

mardi 13 mars 2012

Edge et fontes CSS3

Suite au e-Séminaire Edge de ce matin et en voyant une note de blog chez Typekit, j'ai cherché une solution pour intégrer des css un peu plus poussées dans Edge (qu'est un peu limité pour le moment).

C'est donc suite à un beau bricolage que j'en suis arrivé à ce mélange là.

Tout d'abord, déclarer une nouvelle fonte et dans le code à intégrer coller le style css (qu'on va appliquer ici à une balise h1).

Sur le texte sélectionné, appliquer les ensembles de typos (avec fallback) crées,

Et surtout appliquer la bonne balise, celle définie dans la feuille de style (ici, h1)

Ci-dessous, le résultat (sélectionnable, et tout…)