CSS Font
CSS propriétés de la police de définir la famille de police, de l'audace, la taille et le style d'un texte.
Différence entre Serif et polices sans-serif
Sur les écrans d'ordinateur, sans-serif sont considérés comme plus facile à lire que les polices à empattement.Des familles de polices CSS
En CSS, il existe deux types de noms de famille de polices:
- famille générique - un groupe de familles de polices avec un look similaire (comme "Serif" ou "Monospace")
- famille de polices - une famille de polices spécifiques (comme "Times New Roman" ou "Arial")
| Générique de la famille | La famille de polices | Description |
|---|---|---|
| Serif | Times New Roman en Géorgie | Polices Serif sont petites lignes aux extrémités sur certains caractères |
| Sans-serif | Arial Verdana | "Sans" signifie sans - ces polices n'ont pas les lignes aux extrémités de caractères |
| Monospace | Courier New Lucida Console | Tous les caractères à espacement fixe ont la même largeur |
Famille de polices
La famille de police d'un texte est défini avec la propriété font-family.
La propriété font-family devrait tenir plusieurs noms de polices en tant que «de repli» du système.Si le navigateur ne supporte pas la première police, il tente de la police suivante.
Commencez par la police que vous voulez, et se terminent par une famille générique, de laisser le navigateur choisir une police similaire dans la famille générique, s'il n'y a pas d'autres polices sont disponibles.
Remarque : Si le nom d'une famille de polices est plus d'un mot, il doit être entre guillemets, comme font-family: "Times New Roman".
Plus d'une famille de la police est spécifié dans une liste séparée par des virgules:
Pour des combinaisons de polices les plus couramment utilisés, consultez notre Web des combinaisons de polices sécuritaires .
Style de police
La propriété font-style est surtout utilisé pour spécifier le texte en italique.
Cette propriété dispose de trois valeurs:
- normale - Le texte est affiché normalement
- en italique - Le texte est en italique
- oblique - Le texte est «penchant» (oblique est très similaire à l'italique, mais moins soutenue)
Exemple
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Essayez vous-même »
Taille de la police
La propriété font-size définit la taille du texte.
Être capable de gérer la taille du texte est important dans la conception web. Cependant, vous ne devriez pas utiliser les réglages de taille de la police à faire des paragraphes ressemblent rubriques, ou des positions ressemblent paragraphes.
Toujours utiliser les balises HTML appropriées, comme <h1> - <h6> pour les titres et <p> des paragraphes.
La valeur font-size peut être d'une taille absolue ou relative.
Taille absolue:
- Définit le texte à une taille spécifiée
- Ne permettre à un utilisateur de changer la taille du texte dans tous les navigateurs (mauvais pour des raisons d'accessibilité)
- La taille absolue est utile lorsque la taille physique de la production est connue
La taille relative:
- Définit la taille par rapport aux éléments environnants
- Permet à un utilisateur de changer la taille du texte dans les navigateurs
Si vous ne spécifiez pas une taille de police, la taille par défaut pour le texte normal, comme des paragraphes, est 16px (16px = 1em).Régler la taille des caractères avec des pixels
Réglage de la taille du texte avec des pixels vous donne le plein contrôle sur la taille du texte:
L'exemple ci-dessus permet d'Internet Explorer 9, Firefox, Chrome, Opera, et Safari pour redimensionner le texte.
Remarque: L'exemple ci-dessus ne fonctionne pas dans IE, version antérieure 9.
Le texte peut être redimensionné dans tous les navigateurs utilisant l'outil de zoom (toutefois, cette redimensionne la page entière, pas seulement le texte).
Régler la taille des caractères Avec Em
Pour éviter le problème de redimensionnement avec les anciennes versions d'Internet Explorer, de nombreux développeurs em utiliser à la place de pixels.
La taille de l'unité em est recommandé par le W3C.
1em est égale à la taille de la police en cours. La taille du texte par défaut dans les navigateurs est 16px. Ainsi, la taille par défaut de 1em 16px est.
La taille peut être calculée à partir de pixels pour em en utilisant cette formule: Pixel / 16 = em
Exemple
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Essayez vous-même »
Dans l'exemple ci-dessus, la taille du texte en em est le même que l'exemple précédent en pixels.Cependant, avec la taille em, il est possible d'ajuster la taille du texte dans tous les navigateurs.
Malheureusement, il ya toujours un problème avec les anciennes versions d'IE. Le texte devient plus grande que ce qu'elle devrait lorsqu'elle est faite plus grande, et plus petite que ce qu'elle devrait lorsqu'elle est faite plus petite.
Utilisez une combinaison de pourcentage et Em
La solution qui fonctionne dans tous les navigateurs, est de fixer un défaut font-size en pour cent pour l'élément body:
Exemple
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Essayez vous-même »
Notre code fonctionne maintenant super! Il montre la taille du texte même dans tous les navigateurs, et permet à tous les navigateurs pour zoomer ou redimensionner le texte!
Exemples
Réglez l'audace de la police
Cet exemple montre comment définir l'audace d'une police.
Cet exemple montre comment définir l'audace d'une police.
Réglez la variante de la police
Cet exemple montre comment définir la variante d'une police.
Cet exemple montre comment définir la variante d'une police.
Toutes les propriétés de la police dans une déclaration
Cet exemple montre comment utiliser la propriété raccourcie pour la mise en toutes les propriétés de police dans une déclaration.
Cet exemple montre comment utiliser la propriété raccourcie pour la mise en toutes les propriétés de police dans une déclaration.
Toutes les propriétés CSS de police
| Propriété | Description |
|---|---|
| fonte | Définit toutes les propriétés de la police dans une déclaration |
| font-family | Spécifie la famille de police pour le texte |
| font-size | Spécifie la taille de police de texte |
| font-style | Indique le style de police pour le texte |
| font-variant | Indique si oui ou non un texte doit être affiché dans une police small-caps |
| font-weight | Spécifie le poids d'une police |
Also, they are lighter and can be used around plants
ReplyDeletewhich prefer somewhat acid content in the soil composition.
Louis, a new delivery tradition has been created: the "Mulch Man. Starting Your Very First Flower Garden Preventing Pests and Diseases in the Perennial Garden Gardening Tips from Fellow Gardeners.
Here is my site - mulching
Also, they are lighter and can be used around plants which
ReplyDeleteprefer somewhat acid content in the soil composition. Louis,
a new delivery tradition has been created: the "Mulch Man. Cardboard mulch is very uncommon in Los Angeles, California and other parts of the country.
Look at my site ... mulching
Located near Statesville North Carolina in the town
ReplyDeleteof Hiddenite, which is named after the gem found at the mine.
Now repeat the process by mining and dropping simultaneously.
Thanks for reading this article about Oregon gem mining on Associatedcontent.
Aside from Microsoft and Nintendo, another top competitor, Sony, will also
ReplyDeletebe releasing some top-rated games for its own console - the Playstation.
You must know the different points that you want from a gaming just before you acquire 1.
The students are imparted cost-effective training into experiencing and learning how situations
of emergency can be handled. Flight - simulator flight simulation features
highly detailed time of day modeling and can track
the current computer clock time in order to correctly place the sun, moon, stars, etc.
The instruments that lag in real life, lag correctly,
gyro drift is modeled correctly, the magnetic compass is
subject to aircraft body forces - all those things that make real world
flying a challenge are present.