Maelezo ya CSS @font-face

Maelezo na matumizi

Kwa kutumia maelezo @font-face, mafanikio wa mifano wa Web design wakati hii haikubali shabiki "nyuki mbaya".

Kwenye maelezo @font-face, inafaa kuingia kwanza kielewa jina la shabiki (kama myFirstFont) na baadaye kusimamia faili ya shabiki.

Mafanikio:URL ya shabiki inaona kufikia kwa herufi kwenye harufi. Harufi kubadilika kwa kubadilika inaweza kumfanya kila kitu kina matokeo kwenye IE!

Ili kutumia shabiki kwenye elementi ya HTML, tumia propeti ya font-family kueleza jina la shabiki (myFirstFont):

div {
  font-family: myFirstFont;
}

Tazama pia:

Mafunzo ya CSS:Mwaka wa CSS Web

Mfano

Inaeleza shabiki yenye jina "myFirstFont" na inaamua URL ambao inapatikana kwenye huo:

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

Jaribu tena

Inaonekana kueleza TIY kwenye chini ya ukurasa.

Maadili ya CSS

@font-face {
  font-properties
}
Maelezo la shabiki Wapato Maelezo
font-family name Injili. Kieleza jina la shabiki.
src URL Injili. Kieleza URL ya kumwambaa shabiki.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Inahitajika kubadilisha ukurabu wa familia ya fomu. Chaguo cha kuzingatia ni "normal".
font-style
  • normal
  • italic
  • oblique
 Inahitajika kubadilisha stili ya familia ya fomu. Chaguo cha kuzingatia ni "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Inahitajika kubadilisha kina cha familia ya fomu. Chaguo cha kuzingatia ni "normal".
unicode-range unicode-range Inahitajika kubadilisha rangi ya Unicode ambayo familia ya fomu inasukumwa. Chaguo cha kuzingatia ni "U+0-10FFFF".

Mfano zaidi

Mfano

Inahitajika kuingiza @font-face rule mengine iliyotaka kusaidia herufi ya kina:

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

Jaribu tena

Fayili "sansation_bold.woff" ina mawakili mengine ya familia ya fomu Sansation ambayo ina herufi ya kufikia kwa kina.

Kila mara inafikia kama mtu anasaidia mawakili, kila mawakili anasaidia mawakili.

Kwa hivyo, unaweza kubadilisha @font-face rule zaidi ya moja kwa familia ya fomu moja.

Matumizi ya browseri

Internet Explorer, Firefox, Opera, Chrome na Safari zinaongeza @font-face rule.

Maneno ya jumla katika tabia inaeleza na msingi wa kufunguliwa familia ya fomu kwa browseri zote.

Muundo wa familia ya fomu
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 fomu inaonesha kwa sababu ya "installable" tu.

* Firefox: Inafikia kwa msingi, lakini inaweza kufunguliwa (inaonesha kufungua flag kwa "true" ili kusaidia WOFF2).