Annonce

Réduire
Aucune annonce.

Problème integration de police HTML CSS

Réduire
X
Réduire
 
  • Page sur 1
  • Filtre
  • Heure
  • Afficher
Tout nettoyer
nouveaux messages
Précédent template Suivante
  • #1

    Problème integration de police HTML CSS

    Bonjour à tous,

    Alors je suis en train de créer un site et tout se passait bien jusqu'à maintenant.

    Seulement voila, j'essaie de changer la police du menu de la page d'accueil par une police télécharger en .otf sur le site FontSquirrel mais ça ne veut pas fonctionner.

    Le site est en html5 et CSS3 donc j'ai essayé ceci :

    Code:
    @font-face
{
  font-family: 'Bellota-Bold';
  src: url('Polices/Bellota-Bold.otf');
  font-weight: normal;
  font-style: normal;
   }
    La balise dont je veut changer la police est di donc j'ai rajouter ceci :

    Code:
    nav a
{   font-family: Bellota-Bold;
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
    Puis en dernier espoir ceci:
    Code:
    nav
{font-family: Bellota-Bold;
border: 3px red ridge;
  text-align: center}
    Et ça ne fonctionne toujours pas, quelqu'un aurait une idée ?

    Désolé pour le pavé mais je suis un peu à bout..

    Merci à tous !
    Tags: police, problèintegration
  • #2
    Salut !
    Code:
    @font-face {
  font-family: 'MaPolice';
  src: url("police.ttf");
}
    Test avec un fichier TTF.

    Ou look ce site : http://fvsch.com/code/css-font-face/
    src: url("super-fonte-regular.otf") format("opentype");
    Ça me paraît manquant
    Dernière modification par Yarflam, 14 mai 2013, 23h00.
    ~ Yarflam ~
    ❉ L'Univers se dirige vers son ultime perfection ❉

    Commentaire

    • #3
      Code:
      <!doctype html>
  <head>
    <title>Test</title>
    <style type='text/css'>
      @font-face {
          font-family: Bellota-Bold;
          src: url("Bellota-Bold.otf");
      }

      p {
          font-family: Bellota-Bold;
      }
    </style>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
      Ça marche très bien.
      Dernière modification par Yarflam, 14 mai 2013, 23h05.
      ~ Yarflam ~
      ❉ L'Univers se dirige vers son ultime perfection ❉

      Commentaire

      • #4
        Salut et merci de ta réponse !

        Et après le @font-face, je met ça :
        nav a
        { font-family: Bellota-Bold;
        font-size: 1.3em;
        color: #181818;
        padding-bottom: 3px;
        text-decoration: none;
        ou l'autre ?

        Merci beaucoup

        Commentaire

        • #5
          Envoyé par Yarflam Voir le message
          Code:
          <!doctype html>
  <head>
    <title>Test</title>
    <style type='text/css'>
      @font-face {
          font-family: 'Bellota-Bold';
          src: url("Bellota-Bold.otf");
      }

      p {
          font-family: 'Bellota-Bold';
      }
    </style>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
          Ça marche très bien.
          donc j'intègre le code directement dans la feuille HTML et pas dans la feuille CSS ?

          Commentaire

          • #6
            Non, du tout !
            C'est un exemple.

            Je suis quasiment sur que ton problème de font-face est lié au chemin d'accès.
            ~ Yarflam ~
            ❉ L'Univers se dirige vers son ultime perfection ❉

            Commentaire

            • #7
              Il faut insérer tous les formats pour que ça fonctionne sur tous les navigateurs.

              Code:
              @font-face {
    font-family: 'NomPolice';
    src: url('Polices/NomPolice.eot') format('eot'),
         url('Polices/NomPolice.woff') format('woff'),
         url('Polices/NomPolice.ttf') format('truetype'),
         url('Polices/NomPolice.svg') format('svg');
}
              Qui est le maître, le peintre ou le faussaire... ?

              ㅡ La solidité d'une chaine est égale à la solidité de son maillon le plus faible ㅡ

              Commentaire

              • #8
                Envoyé par Yarflam Voir le message
                Non, du tout !
                C'est un exemple.

                Je suis quasiment sur que ton problème de font-face est lié au chemin d'accès.
                Effectivement ça marche, merci !! Par contre, du coup l'un de mes deux codes plus haut est superflue non ?

                Envoyé par Lastwissh Voir le message
                Il faut insérer tous les formats pour que ça fonctionne sur tous les navigateurs.

                Code:
                @font-face {
    font-family: 'NomPolice';
    src: url('Polices/NomPolice.eot') format('eot'),
         url('Polices/NomPolice.woff') format('woff'),
         url('Polices/NomPolice.ttf') format('truetype'),
         url('Polices/NomPolice.svg') format('svg');
}
                Salut,

                Je ne l'ai trouvé qu'au format OTF, donc comment faire ?

                Merci

                Commentaire

                • #9
                  Le mieux pour utiliser une font spé est de passer par Google Fonts.

                  1. Ta font sera assurée d'être supportée.
                  2. La bibliothèque de polices est encore plus vaste que celle de DaFont.
                  3. Elle te fournit directement le code à implémenter dans ton CSS.

                  Tu vas donc ici :

                  http://www.google.com/fonts/

                  Pour la démo on va faire avec la première en haut. Donc tu clique sur l'icone 'petite flèche qui va vers la droite' : "Quick Use".

                  1. Tu paramètres ta police en fonction des aperçus.
                  2. Tu choisis ton charset (Latin).
                  3. Tu rentres la ligne de code (souhaitée, cf. options) pour appeler la font chez Google (3 options : HTML, CSS, JS : par défaut HTML).
                  4. Tu copies la ligne à mettre dans ton CSS.

                  Note : Tout le monde dit à tort (et à travers) HTML 5 et CSS 3, alors que la plupart du temps ils font du xHTML et du CSS2. Arrêtez, par pitié, de sortir "HTML5/CSS3" à tout bout de champ parce-que vous utilisez juste une seule petite balise/propriétés "exotiques". Surtout que là en l'occurrence, @font-face existe depuis bien longtemps. C'est juste qu'elle était mal prise en compte par les navigateurs.
                  sigpic

                  Cyprium Download Link

                  Plus j'étudie plus j'me rends compte que je n'sais rien.

                  †|

                  Commentaire

                  • #10
                    Je ne peux pas t'aider, sans code.
                    La seule chose qui doit être important c'est l'import.
                    Code:
                          @font-face {
          font-family: 'Bellota-Bold';
          src: url("Bellota-Bold.otf");
      }
                    Après tu mets le classique "font-family" pour utiliser la police en question.
                    Si ça marche pas, vérifies les points virgules / fermeture des accolades / syntaxes etc ...

                    @++

                    EDIT: Bonne idée Sakarov !
                    ~ Yarflam ~
                    ❉ L'Univers se dirige vers son ultime perfection ❉

                    Commentaire

                    • #11
                      Envoyé par Yarflam Voir le message
                      Je ne peux pas t'aider, sans code.
                      La seule chose qui doit être important c'est l'import.
                      Code:
                            @font-face {
          font-family: 'Bellota-Bold';
          src: url("Bellota-Bold.otf");
      }

                      Après tu mets le classique "font-family" pour utiliser la police en question.
                      Si ça marche pas, vérifies les points virgules / fermeture des accolades / syntaxes etc ...

                      @++

                      EDIT: Bonne idée Sakarov !
                      Tant que ça fonctionne, c'est l'essentiel merci .

                      Envoyé par SAKAROV Voir le message
                      Le mieux pour utiliser une font spé est de passer par Google Fonts.

                      1. Ta font sera assurée d'être supportée.
                      2. La bibliothèque de polices est encore plus vaste que celle de DaFont.
                      3. Elle te fournit directement le code à implémenter dans ton CSS.

                      Tu vas donc ici :

                      http://www.google.com/fonts/

                      Pour la démo on va faire avec la première en haut. Donc tu clique sur l'icone 'petite flèche qui va vers la droite' : "Quick Use".

                      1. Tu paramètres ta police en fonction des aperçus.
                      2. Tu choisis ton charset (Latin).
                      3. Tu rentres la ligne de code (souhaitée, cf. options) pour appeler la font chez Google (3 options : HTML, CSS, JS : par défaut HTML).
                      4. Tu copies la ligne à mettre dans ton CSS.

                      Note : Tout le monde dit à tort (et à travers) HTML 5 et CSS 3, alors que la plupart du temps ils font du xHTML et du CSS2. Arrêtez, par pitié, de sortir "HTML5/CSS3" à tout bout de champ parce-que vous utilisez juste une seule petite balise/propriétés "exotiques". Surtout que là en l'occurrence, @font-face existe depuis bien longtemps. C'est juste qu'elle était mal prise en compte par les navigateurs.
                      C'est excellent cette solution, merci beaucoup !!

                      Commentaire

                      • #12
                        Sinon, tu importes ta police ici et ça te crée directement tout ce dont tu as besoin (formats + css)
                        Qui est le maître, le peintre ou le faussaire... ?

                        ㅡ La solidité d'une chaine est égale à la solidité de son maillon le plus faible ㅡ

                        Commentaire

                        Précédent template Suivante
                        Projets
                        Cyprium
                        Blog
                        CTF Hackademics
                        Discord
                        Status
                        Mentions légales
                        Politique de confidentialité
                        Conditions générales d'utilisation (CGU)
                        Chargement...
                        X