Introduction aux propriétés liées aux caractères et polices chinois en CSS3

Cet article vous apporte une introduction aux attributs liés aux caractères et polices chinois dans CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1 attribut texte-ombre

(1) Fonction

Ajouter un effet d'ombre au texte sur le page .

(2) Comment utiliser

text-shadow : longueur longueur longueur couleur (la distance horizontale de l'ombre par rapport au texte, la distance verticale, le rayon de flou de l'ombre, la couleur de l'ombre)

Remarque :

La distance horizontale et la distance verticale de l'ombre par rapport au texte : Doit être précisée, valeurs négatives ​peut être précisé.

Le rayon de flou de l'ombre : représente la plage de flou lorsque l'ombre est floue vers l'extérieur. Plus le rayon est grand, plus l'ombre sera floue vers l'extérieur. Paramètre facultatif, lorsqu'il est omis, la valeur par défaut est 0, ce qui signifie que l'ombre ne sera pas floue vers l'extérieur.

Couleur de l'ombre : paramètre facultatif, lorsqu'il n'est pas spécifié, la couleur de l'attribut color est utilisée dans CSS2 (Firefox et Opera actuels, d'autres ne prennent pas en charge l'omission, sinon il ne sera pas dessiné ), en CSS3 Utiliser la couleur par défaut spécifiée par le navigateur.

(4) Spécifiez plusieurs ombres

text-shadow：10px 10px #f39800,
                         40px 35px #fff100,
                        70px  60px #c0ff00；

Seuls les navigateurs Chrome, Firefox et Opera prennent en charge cette fonction.

(3) Prise en charge du navigateur

Jusqu'à présent : les navigateurs Safari, Chrome, Firefox et Opera prennent en charge cet attribut.

text-shadow : 5px 5px 5px gray ; (ombre grise, l'ombre quitte la molécule de 5 pixels dans les directions horizontale et verticale)

2 attribut de coupure de mot

(1) Fonction : laisser le texte s'enrouler automatiquement

(2) Valeur : normal (utiliser les règles d'habillage par défaut du navigateur), garder tout (ne peut utiliser que la moitié -espaces de largeur) ou saut de ligne au niveau d'un trait d'union), break-all (autoriser les sauts de ligne dans les mots)

(3) Prise en charge du navigateur

Jusqu'à présent : prise en charge des navigateurs Safari, Chrome et IE cet attribut.

3 attributs de retour à la ligne

(1) Fonction : Laissez les mots longs et les adresses URL s'enrouler automatiquement .

(2) Valeurs : normal (traitement par défaut du navigateur), break-word (sauts de ligne dans les mots longs ou les adresses URL)

(3) Prise en charge du navigateur : tous les navigateurs.

4 Attributs Web Font et @font-face

(1) Fonction : Afficher la police côté serveur sur la page Web.

(2) Utilisation :

@font-face{
    font-famliy：WebFont；
    src：url（‘font/Fontin_Sans_R_45b.otf’）  format（“opentype”）；
   font-weitht：normal；
}
h1{
    font-family：WebFont；
}

5 attribut font-size-adjust

(1) Fonction : Modifier la police tapez tout en gardant la taille de la police inchangée

(2) Comment utiliser :

valeur d'aspect (valeur proportionnelle) : peut être utilisée pour conserver la taille de police de base lors de la modification de la police en autres polices constantes. (Constante)

Méthode de calcul : valeur de la hauteur x (la hauteur du X minuscule écrit dans cette police (en pixels)) divisée par la taille de la police.

p{
   font-size：16px；
   font-famliy：Times New Roman；
   font-size-adjust：0.46（aspect值）
}

(3) Comment le navigateur calcule la valeur d'aspect :

Après avoir spécifié la valeur d'aspect dans l'attribut font-size-adjust et changé la police en une autre police, le navigateur La formule de calcul de la taille de police modifiée :

c = (a/b) s

a : représente la valeur d'aspect de la police réellement utilisée, b : représente la valeur d'aspect de la police avant modification,

s : indique la taille de police spécifiée , c : la taille de police effectivement affichée par le navigateur.

(4) La valeur de l'attribut peut être définie sur : "aucun"

ce qui équivaut à ne pas définir l'attribut font-size-adjust et à afficher la police en fonction de sa taille d'origine.

6 Utilisez les unités rem pour définir la taille de la police

(1) L'unité de taille de police rem est basée sur l' élément racine de la page (fait généralement référence à l'élément html) La taille de police réelle est calculée quelle que soit la taille de police de l'élément parent de l'élément.

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

(2) Prise en charge du navigateur :

Jusqu'à présent : tous les navigateurs, y compris IE9, sont pris en charge.

(3) Compatible avec IE8 et les versions précédentes (les unités de police rem ne peuvent pas être utilisées)

html｛font-size：62.5%｝
small｛font-size：11px；font-size：1.1rem；｝
strong｛font-size：18px；font-size：1.8rem；｝

Recommandations associées :

Comment utiliser les sélecteurs en CSS3 sur la page Insérer le contenu requis (avec code)

Quatre fonctions implémentées par l'attribut transform en CSS3 (rotation, mise à l'échelle, inclinaison, mouvement)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!