Kaidi ya CSS @font-face

  • Page ya Kwanza
  • Pya Page

Maelezo na matumizi

Kwa kutumia kaidi ya @font-face, mshahidi wa web design hakutofautiana na familia ya heri inayotumiwa kwa "nyumba ya mawasiliano".

Kwenye kaidi ya @font-face, inafaa kuingia kwanza jina la familia ya heri (kama myFirstFont) na baadaye kumekua faili ya familia ya heri.

Mambo ya kuzingatia:URL ya familia ya heri inahitaji kuzingatia heri kwa heri. Kwa sababu ya IE, heri kubadilika kwa heri inaweza kutoa matokeo ya kuzingatia kwa urahisi!

Ili kutumia familia ya heri kwenye elementi ya HTML, tumezaa kufikia jina la familia ya heri kwa njia ya propeti ya font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Tazama pia:

Mafunzo ya CSS:Fonti za Web cha CSS

Mfano

Tunaonyesha familia ya heri inayoitwa "myFirstFont" na inasababisha URL yake ambayo inaweza kufikia:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Tafakari hizi

Inafikia chini ya ukurasa kwa vifaa vya TIY zaidi.

Majukuu ya CSS

@font-face {
  font-properties
}
Font descriptor Wakati Maelezo
font-family name Injili. Kieleza jina la familia ya heri.
src URL Injili. Kieleza URL ya kudownloada familia ya heri.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Chaguo. Inaonesha kufaa kwa familia ya fnti. Chaguo cha kawaida ni "normal".
font-style
  • normal
  • italic
  • oblique
 Chaguo. Inaonesha kufaa kwa familia ya fnti. Chaguo cha kawaida ni "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Chaguo. Inaonesha kufaa kwa familia ya fnti. Chaguo cha kawaida ni "normal".
unicode-range unicode-range Chaguo. Inaonesha kufaa kwa Unicode cha familia ya fnti. Chaguo cha kawaida ni "U+0-10FFFF".

Mfano zaidi

Mfano

Wajibu wako kuongeza mtihani wa @font-face mwingine ambao inahusiana na maelezo ya mbinguni wa mbinguni:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Tafakari hizi

Fayili "sansation_bold.woff" ni fayili ya familia ya fnti moja zaidi inayohusiana na familia ya fnti Sansation kwa maelezo ya mbinguni.

Kila mara unapokea kuweka kwa familia ya fnti "myFirstFont" kwa kufikia maelezo yaliyotumika kama mbinguni, browseri inatumia hiyo.

Kwa hivyo, unaweza kufungua @font-face zaidi kwa familia ya fnti moja.

Utafiti wa browseri

Internet Explorer, Firefox, Opera, Chrome na Safari zinaongea na mtihani wa @font-face.

Mayarivu ya jumla kwenye tabia inasema na kawaida inafaa kufaa na familia ya fnti kwa sababu ya kufaa kwa browseri zote za kwanza.

Muundo wa familia ya fnti
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Husukumwa Husukumwa Husukumwa 3.2 Husukumwa
EOT 6.0 Husukumwa Husukumwa Husukumwa Husukumwa

* Edge na IE: muundo wa familia ya fnti hupatikana kwa uwezo wa kufunguliwa (inaonesha kuweza kutumia WOFF2).

* Firefox: inayofungwa kwa chaguo cha kuzingatia, lakini inaweza kufunguliwa (inaonesha kuweza kutumia WOFF2, kama ingawa inahitaji kufungua flag kwa "true").

  • Page ya Kwanza
  • Pya Page