CSS ﺏﻭ ﯼﺎﻫ ﺖﻧﻮﻓ

فهرست مطالب

نمایش فهرست مطالب

CSS @font-face ﻥﻮﻧﺎﻗ

.ﺪﻧﺍ ﻩﺪﺸﻧ ﺐﺼﻧ ﺮﺑﺭﺎﮐ ﻪﻧﺎﯾﺍﺭ ﯼﻭﺭ ﻪﮐ ﺪﻨﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﯽﯾﺎﻫ ﺖﻧﻮﻓ ﺯﺍ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺏﻭ

ﺪﯿﻨﮐ ﺩﺭﺍﻭ ﺍﺭ ﺖﻧﻮﻓ ﻂﻘﻓ ،ﺪﯾﺪﯾﺮﺧ/ﺪﯾﺩﺮﮐ ﺍﺪﯿﭘ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ ﺍﺭ ﯽﺘﻧﻮﻓ ﯽﺘ

.ﺖﺳﺍ ﻩﺪﺷ ﻒﯾﺮﻌﺗ @font-face

ﺖﻧﻮﻓ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﺖﻣﺮﻓ

ﯼﺎﻫ ﻢﻠﻗ TrueType (TTF)

TrueType ﺖﻓﺎﯾ ﻪﻌﺳﻮﺗ ﺖﻓﺎﺳﻭﺮﮑﯾﺎﻣ ﻭ ﻞﭘﺍ ﻂﺳﻮﺗ 1980 ﻪﻫﺩ ﺮﺧﺍﻭﺍ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﺖﻧﻮﻓ ﺩﺭﺍﺪﻧﺎ

ﯼﺎﻫ ﻢﻠﻗ OpenType (OTF)

OpenType ﺱﺎﺳﺍ ﺮﺑ ﻦﯾﺍ .ﺖﺳﺍ ﺮﯾﺬﭘ ﺱﺎﯿﻘﻣ ﯼﺮﺗﻮﯿﭙﻣﺎﮐ ﯼﺎﻫ ﺖﻧﻮﻓ ﯼﺍﺮﺑ ﯽﺘﻣﺮﻓ TrueType ﺖﺳ

ﺏﻭ ﺯﺎﺑ ﺖﻧﻮﻓ ﺐﻟﺎﻗ (WOFF)

WOFF ﺖﺳﺍ ﻭ ،ﺖﺳﺍ ﻪﺘﻓﺎﯾ ﻪﻌﺳﻮﺗ 2009 ﻝﺎﺳ ﺭﺩ ﻦﯾﺍ .ﺖﺳﺍ ﺏﻭ ﺕﺎﺤﻔﺻ ﺭﺩ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺖﻧﻮﻓ

ﺏﻭ ﺯﺎﺑ ﺖﻧﻮﻓ ﺐﻟﺎﻗ (WOFF 2.0)

.ﺪﻨﮐ ﯽﻣ ﻢﻫﺍﺮﻓ WOFF 1.0 ﻪﺑ ﺖﺒﺴﻧ ﯼﺮﺘﻬﺑ ﯼﺯﺎﺳ ﻩﺩﺮﺸﻓ ﻪﮐ TrueType/OpenType ﺖﻧﻮﻓ

ﻝﺎﮑﺷﺍ/ﻢﻠﻗ SVG

SVG 1.1 .ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﻒﯿﻠﮔ ﻥﺍﻮﻨﻋﻪﺑ ﻦﺘﻣ ﺶﯾﺎﻤﻧ ﻡﺎﮕﻨﻫ ﺎﺗ ﺪﻨﻫﺩﯽﻣ ﻩﺯﺎﺟﺍ SV

ﯼﺎﻫ ﺖﻧﻮﻓ OpenType ﻩﺪﺷ ﻪﯿﺒﻌﺗ (EOT)

ﺪﻧﺍ ﻩﺪﺷ ﯽﺣﺍﺮﻃ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺖﻓﺎﺳﻭﺮﮑﯾﺎﻣ ﻂﺳﻮﺗ ﻪﮐ ﺪﻨﺘﺴﻫ OpenType ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ ﯼﺍ ﻩﺩ

ﺖﻧﻮﻓ ﯼﺎﻫ ﺖﻣﺮﻓ ﺯﺍ ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻥﺁ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ ﺭﺩ

Font format
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	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*IE: ﺩﻮﺷ ﻢﯿﻈﻨﺗ «ﺮﯾﺬﭘ ﺐﺼﻧ» ﯼﻭﺭ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﯽﻧﺎﻣﺯ ﻂﻘﻓ ﺖﻧﻮﻓ ﺖﻣﺮﻓ.

ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ ﯽﺘﻧﻮﻓ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ

.ﺪﯿﻨﮐ ﻩﺭﺎﺷﺍ ﺖﻧﻮﻓ ﻞﯾﺎﻓ ﻪﺑ ﺲﭙﺳ ﻭ (myFirstFont ﻝﺎﺜﻣ ﻥﺍﻮﻨﻋ ﻪﺑ) ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺖﻧﻮﻓ ﯼﺍﺮ

ﻪﺘﮑﻧ: ﯼﺍﺮﺑ ﮏﭼﻮﮐ ﻑﻭﺮﺣ ﺯﺍ ﻪﺸﯿﻤﻫ URL ﺭﺩ ﺍﺭ ﯼﺍ ﻩﺮﻈﺘﻨﻣﺮﯿﻏ ﺞﯾﺎﺘﻧ ﺪﻨ

:ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ (myFirstFont) ﺖﻧﻮﻓ ﻡﺎﻧ ﻪﺑ font-family

`ﻝﺎﺜﻣ`

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

div
{
   
font-family: myFirstFont;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

`ﮓﻧﺭﺮﭘ ﻦﺘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ`

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﮓﻧﺭﺮﭘ ﻦﺘﻣ ﯼﺍﺮﺑ ﯽﯾﺎﻫﺮﮕﻔﯿﺻﻮﺗ ﯼﻭﺎﺣ ﯼﺮﮕﯾﺩ @f

`ﻝﺎﺜﻣ`

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

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

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

.ﺖﺳﺍ Sansation ﺖﻧﻮﻓ ﯼﺍﺮﺑ ﮓﻧﺭﺮﭘ ﯼﺎﻫﺮﺘﮐﺍﺭﺎﮐ ﻞﻣﺎﺷ ﻪﮐ ﺖﺳﺍ ﺮﮕﯾﺩ ﺖﻧﻮﻓ ﻞﯾﺎﻓ ﮏﯾ "sansa

.ﺩﺮﮐ ﺪﻨﻫﺍﻮﺧ ﻩﺩﺎﻔﺘﺳﺍ ﻦﯾﺍ ﺯﺍ ﺎﻫﺮﮔﺭﻭﺮﻣ ،ﺩﻮﺷ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﮓﻧﺭﺮﭘ ﺕﺭﻮﺻ ﻪﺑ "myFirstFont

.ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺖﻧﻮﻓ ﻥﺎﻤﻫ ﯼﺍﺮﺑ @font-face ﻦﯿﻧﺍﻮﻗ

`CSS ﻢﻠﻗ ﯼﺎﻫﺮﮕﻔﯿﺻﻮﺗ`

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺩﺮﮐ ﻒﯾﺮﻌﺗ @font-face ﻥﻮﻧﺎﻗ ﺭﺩ ﻥ

ﺮﮕﻔﯿﺻﻮﺗ:

font-family

ﺮﯾﺩﺎﻘﻣ:

name

ﺕﺎﺤﯿﺿﻮﺗ:

ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺖﻧﻮﻓ ﯼﺍﺮﺑ ﻡﺎﻧ ﮏﯾ .ﯼﺭﻭﺮﺿ

ﺮﮕﻔﯿﺻﻮﺗ:

src

ﺮﯾﺩﺎﻘﻣ:

URL

ﺕﺎﺤﯿﺿﻮﺗ:

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺖﻧﻮﻓ ﻞﯾﺎﻓ URL .ﯼﺭﻭﺮﺿ

ﺮﮕﻔﯿﺻﻮﺗ:

font-stretch

ﺮﯾﺩﺎﻘﻣ:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

ﺕﺎﺤﯿﺿﻮﺗ:

ﺖﺳﺍ "ﯼﺩﺎﻋ" ﺽﺮﻓ ﺶﯿﭘ .ﺩﻮﺷ ﻩﺪﯿﺸﮐ ﺪﯾﺎﺑ ﺖﻧﻮﻓ ﻪﻧﻮﮕﭼ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ .ﯼﺭﺎﯿﺘﺧﺍ

ﺮﮕﻔﯿﺻﻮﺗ:

font-style

ﺮﯾﺩﺎﻘﻣ:

normal
italic
oblique

ﺕﺎﺤﯿﺿﻮﺗ:

ﺖﺳﺍ "ﯼﺩﺎﻋ" ﺽﺮﻓ ﺶﯿﭘ .ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺖﻧﻮﻓ ﯼﺪﻨﺑ ﻞﯾﺎﺘﺳﺍ ﻩﻮﺤﻧ .ﯼﺭﺎﯿﺘﺧﺍ

ﺮﮕﻔﯿﺻﻮﺗ:

font-weight

ﺮﯾﺩﺎﻘﻣ:

normal
bold
100
200
300
400
500
600
700
800
900

ﺕﺎﺤﯿﺿﻮﺗ:

ﺖﺳﺍ "ﯼﺩﺎﻋ" ﺽﺮﻓ ﺶﯿﭘ .ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺖﻧﻮﻓ ﻥﺩﻮﺑ ﮓﻧﺭﺮﭘ .ﯼﺭﺎﯿﺘﺧﺍ

ﺮﮕﻔﯿﺻﻮﺗ:

unicode-range

ﺮﯾﺩﺎﻘﻣ:

unicode-range

ﺕﺎﺤﯿﺿﻮﺗ:

ﺖﺳﺍ "U+0-10FFFF" ﺽﺮﻓ ﺶﯿﭘ .ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﺖﻧﻮﻓ ﻪﮐ ﺍﺭ ﺪﮑﯿﻧﻮﯾ ﯼﺎﻫ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →