IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Propriétés des google fonts


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 495
    Billets dans le blog
    1
    Par défaut Propriétés des google fonts
    Bonjour,
    je suis actuellement un tuto qui utilise les google fonts. Utiliser une font, c'est OK mais celles-ci peuvent avoir des propriétés et je n'ai pas trouvé où celles-ci sont définies.
    Par exemple, dans https://fonts.googleapis.com/css?family=Muli:300,400,600,700 les propriétés de la font muli sont 300,400,600,700 mais où cela est-il défini ?

  2. #2
    Membre extrêmement actif
    Avatar de Sodium
    Femme Profil pro
    Développeuse web
    Inscrit en
    Avril 2014
    Messages
    2 324
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeuse web

    Informations forums :
    Inscription : Avril 2014
    Messages : 2 324
    Billets dans le blog
    1
    Par défaut
    Ca ressemble à des valeurs de graisse de la police (il n'y a pas que le normal et le bold, ça va de très light au très gras, 400 correspondant à "normal" de mémoire), donc je suppose que cela sert tout simplement à les charger pour pouvoir les utiliser.

  3. #3
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 495
    Billets dans le blog
    1
    Par défaut
    Merci de la réponse, mais ça doit être décrit quelque part et je voudrais savoir où. De plus, ici, il y a 4 valeurs, donc quel est la signification de ces 4 valeurs ?

  4. #4
    Membre extrêmement actif
    Avatar de Sodium
    Femme Profil pro
    Développeuse web
    Inscrit en
    Avril 2014
    Messages
    2 324
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeuse web

    Informations forums :
    Inscription : Avril 2014
    Messages : 2 324
    Billets dans le blog
    1
    Par défaut
    https://stackoverflow.com/questions/...r-google-fonts

    Les valeurs sont les valeurs de graisse (épaisseur) de la police.
    400 correspond à du normal, 700 à du bold, 300 est plus léger que le normal , 600 est entre les deux.

    https://www.w3schools.com/cssref/pr_font_weight.asp

  5. #5
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 495
    Billets dans le blog
    1
    Par défaut
    OK, je commence à comprendre...

    Cela signifie donc que d'abord on va charger la police pour ces valeurs, et qu'ensuite on pourra les utiliser sans avoir à les recharger à chaque fois. C'est bien ça ?

    D'ailleurs, dans le CSS, la ligne complète est : @import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700');

  6. #6
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    ces valeurs correspondent a des standards de l'imprimerie qui ont ensuite été reprises par Adobe puis pas MS et Apple quand ils ont fait les fonts typeScript, puis aujourd'hui par Google, et le dans l'histoire le W3C et le monde libre c'est aussi interressé à creer de format libres ou adaptés aux problématiques de rendu ( format WOFF et WOFF2)
    Pour les pages internet ces valeurs se retrouvent en CSS sur l'attribut font-weight et peuvent varier de 1 à 1000 (même si aucune Font ne se décline en 1000 valeurs)
    https://developer.mozilla.org/fr/doc...SS/font-weight

    Le navigateur peut de lui même transformer une font normal (400) en du Bold (700) mais le rendu n'est pas forcement bon après transformation, surtout si on part d'une font extraLight pour aller ver une extra Bold;
    le dessin de la font n'est pas forcement le même en fin et en Bold, etc, et encore moins en italique.

    Les font c'est tout un monde, certaines on des caracteres que d'autres n'ont pas; exemple: les polices anglaises n'ont pas toujours tous les signe diacitiques

    C'est aussi pour cette raison que Google c'est lancé dans "Google Font" et à au passage créé la Font Noto, qui est quasiment la seule aujourd'hui à proposer tous les graphèmes possibles et dans divers poids et variantes.

    https://www.fontsquirrel.com/fonts/n...rch_check%5D=Y
    https://www.fontsquirrel.com/fonts/noto-mono
    https://www.fontsquirrel.com/fonts/noto-sans

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [TestStand] Propriétés des pas d'une séquence
    Par capblans dans le forum Langages de programmation
    Réponses: 7
    Dernier message: 20/04/2005, 09h57
  2. Propriétés des cartes réseau
    Par Yodagobah dans le forum MFC
    Réponses: 2
    Dernier message: 05/01/2005, 13h55
  3. Réponses: 4
    Dernier message: 04/08/2004, 13h26
  4. Propriété des ActiveX
    Par nico-pyright(c) dans le forum MFC
    Réponses: 16
    Dernier message: 16/02/2004, 14h03
  5. Variable globale / Propriété des threads
    Par rgarnier dans le forum XMLRAD
    Réponses: 4
    Dernier message: 03/10/2003, 10h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo