AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [TUTO] Comment utiliser n'importe quelle police d'écriture facilement?

    Partagez
    avatar
    Eiv
    MasculinAge : 23Messages : 503

    le Ven 30 Juin 2017 - 20:11



    Comment utiliser n'importe quelle police d'écriture facilement ?


    Le résultat n'est pas aussi lisse et peut avoir quelques déformations en comparaison de la police d'origine.
    Ce format consomme plus de ressources, privilégier l'hébergement pour les grands volumes textes et les utilisations répéter.



    Alors le tutoriel va être rapide et court, car c'est particulièrement simple, mais il fallait le savoir.

    Étape 1: La Base

    Tout d'abord, il vous faut une police d'écriture, nous nous prendrons ANXIETY. Une police simple et géométrique au format .ttf, mais les autres formats fonctionne tout autant.

    Étape 2: Paramétrage  


    On va se rendre sur un site qui va convertir notre fichier en un format BASE64 que l'on ajoutera dans le CSS dans votre forum qui sera lisible par votre navigateur. J'utilise personnellement Transfonter, mais vous pouvez aussi utiliser FontSquirrel Generator. Mais par soucie de facilité on usera de :Transfonter.

    Vous allez d'abord paramétrer les options ainsi: (les autres options n'ont pour nous aucune utilité pour nos objectifs.

    La disquette
     vous servira a sauvegarder vos paramètres pour une utilisation future.


    Étape 3: Convertisage



    On va maintenant cliquer sur et aller sélectionner notre petit fichier de police
    (Je ne vais pas vous faire l'offense de vous expliquer comment aller chercher un fichier)

    La police apparaît alors ici:

    Et vous n'aver plus qu'a cliquer sur puis télécharger votre kit en cliquant sur.

    Étape 4: Application dans le css


    Vous avez téléchargé un Zip a l'étape précédente, dedans vous trouverez un fichier comme ceci:

    Ouvrez-le avec un éditeur texte (notepad++ personnellement)
    Vous y trouverez cela:


    Vous n'avez plus qu'à le copier dans votre CSS, trouvable dans : Affichage  > Couleurs > Feuille de style CSS.

    Étape 5: Exemple


    Avec cela vous pourrez ainsi faire de joli titre de sujet ou même dans l'aspect du graphique MAIS toujours avec modération.



    Dernière édition par Eiv le Dim 14 Jan 2018 - 13:21, édité 1 fois



    avatar
    Angie H.-Carter
    FémininAge : 35Messages : 714

    le Ven 30 Juin 2017 - 20:35

    Merci beaucouppour ce tuto *-* c'est magique un gros gros coup de coeur!!!!



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Rozenbrez
    FémininAge : 27Messages : 1382

    le Sam 1 Juil 2017 - 15:05

    Merci pour le tuto. Very Happy Très intéressent et peut-être plus facile à utiliser que le google-font.

    avatar
    Arkaline
    FémininAge : 27Messages : 186

    le Sam 13 Jan 2018 - 19:06

    Merci mon cher Zérooooooooooos! Euh, Eiv Very Happy



    Arkaline
    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Sep 2018 - 10:00