ﻞﮔﻮﮔ CSS ﯼﺎﻫ ﺖﻧﻮﻓ

فهرست مطالب

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

ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ،ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ HTML ﺭﺩ ﺩﺭﺍﺪﻧﺎﺘﺳﺍ ﯼﺎﻫ ﺖ

.ﺩﺭﺍﺩ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ ﺖﻧﻮﻓ 1000 ﺯﺍ ﺶﯿﺑ ﻭ ﺖﺳﺍ ﻥﺎﮕﯾﺍﺭ ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮﺤﻧ

.ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ CSS ﺭﺩ ﺖﻧﻮﻓ ﻪﺑ ﺲﭙﺳ ﻭ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ <head> ﺖﻤﺴﻗ ﺭﺩ ﺹﻮﺼﺨﻣ ﺖﯿﺷ ﮏﻨﯿﻟ ﮏﯾ

ﻝﺎﺜﻣ

:ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ "Sofia" ﻡﺎﻧ ﻪﺑ ﯽﺘﻧﻮﻓ ﺯﺍ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ،ﺎﺠﻨﯾﺍ ﺭﺩ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
}
</style>
</head>

:ﻪﺠﯿﺘﻧ

Sofia Font

Lorem ipsum dolor sit amet.

123456790

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

ﻝﺎﺜﻣ

:ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ "Trirong" ﻡﺎﻧ ﻪﺑ ﯽﺘﻧﻮﻓ ﺯﺍ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺎﻣ ،ﺎﺠﻨﯾﺍ ﺭ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  
  font-family: "Trirong", serif;
}
</style>
</head>

:ﻪﺠﯿﺘﻧ

Trirong Font

Lorem ipsum dolor sit amet.

123456790

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

ﻝﺎﺜﻣ

:ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﺯﺍ "Audiowide" ﻡﺎﻧ ﻪﺑ ﯽﺘﻧﻮﻓ ﺯﺍ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ،ﺎﺠﻨﯾﺍ ﺭﺩ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  
  font-family: "Audiowide", sans-serif;
}
</style>
</head>

:ﻪﺠﯿﺘﻧ

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

ﻪﺟﻮﺗ: ﺭﺩ ﺖﻧﻮﻓ ﻦﯿﯿﻌﺗ ﻡﺎﮕﻨﻫ CSS، ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺖﺳﺮﻬﻓ ﺭﺩ ﻪﺸﯿﻤﻫ

.ﺪﯿﻨﮐ ﻥﺪﯾﺩ Google Fonts - ﻪﻧﻮﮕﭼ ﺵﺯﻮﻣﺁ ﺯﺍ ،ﺩﻮﺟﻮﻣ Google ﯼﺎﻫﺖﻧﻮﻓ ﻡﺎﻤﺗ ﺯﺍ ﯽﺘ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻞﮔﻮﮔ ﺖﻧﻮﻓ ﻦﯾﺪﻨﭼ ﺯﺍ

ﺪﯿﻨﮐ ﺍﺪﺟ ﻪﻟﻮﻟ ﮏﯾ ﺎﺑ ﺍﺭ ﺎﻫ ﺖﻧﻮﻓ ﻡﺎﻧ ﺖﺳﺍ ﯽﻓﺎﮐ ،ﻞﮔﻮﮔ ﺖﻧﻮﻓ ﻦﯾﺪﻨﭼ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

:ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﺖﻧﻮﻓ ﺖﺳﺍﻮﺧﺭﺩ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
  h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", 
  sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

:ﻪﺠﯿﺘﻧ

Audiowide Font

Sofia Font

Trirong Font

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {
  font-family: "Audiowide", sans-serif;
}

h1.b {
  font-family: "Sofia", sans-serif;
}

h1.c {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>

ﻪﺟﻮﺗ: ﺪﻨﮐ ﺪﻨﮐ ﺍﺭ ﺎﻤﺷ ﺏﻭ ﺕﺎﺤﻔﺻ ﺖﺳﺍ ﻦﮑﻤﻣ ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﺖﻧﻮﻓ ﺖﺳﺍﻮﺧﺭﺩ

ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﻪﺑ ﻥﺩﺍﺩ ﺖﻟﺎﺣ

!ﺪﯿﻫﺩ ﻞﯾﺎﺘﺳﺍ ﺪﯾﺭﺍﺩ ﺖﺳﻭﺩ ﻪﮐ ﺭﻮﻃ ﺮﻫ ﻞﮔﻮﮔ ﯼﺎﻫ ﺖﻧﻮﻓ ﻪﺑ CSS ﺎﺑ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻪﺘﺒﻟﺍ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﮏﺒﺳ ﺍﺭ "Sofia" ﺖﻧﻮﻓ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

:ﻪﺠﯿﺘﻧ

Sofia Font

Lorem ipsum dolor sit amet.

123456790

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

ﺖﻧﻮﻓ ﯼﺎﻫ ﻩﻮﻠﺟ ﻥﺩﺮﮐ ﻝﺎﻌﻓ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻬﻧﺁ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻪﮐ ﺖﺳﺍ ﻩﺩﺮﮐ ﻝﺎﻌﻓ ﺍﺭ ﺖﻧﻮﻓ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﺖﮑﻓﺍ ﻦﯿﻨﭽﻤﻫ

،ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ API Google ﻪﺑ ﺍﺭ effect=effectname

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ "Sofia" ﺖﻧﻮﻓ ﻪﺑ ﺍﺭ ﺶﺗﺁ ﺖﮑﻓﺍ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-fire">Sofia on 
  Fire</h1>
</body>

:ﻪﺠﯿﺘﻧ

Sofia on Fire

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﺟ ﻪﻟﻮﻟ ﺮﺘﮐﺍﺭﺎﮐ ﮏﯾ ﺎﺑ ﺍﺭ ﺎﻫ ﺖﮑﻓﺍ ﻡﺎﻧ ﺖﺳﺍ ﯽﻓﺎﮐ ،ﺖﻧﻮﻓ ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﺖﮑﻓﺍ ﺖﺳﺍﻮﺧ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ "Sofia" ﺖﻧﻮﻓ ﻪﺑ ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﺖﮑﻓﺍ

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline 
  Effect</h1>
<h1 class="font-effect-emboss">Emboss 
  Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple 
  Shadow Effect</h1>
</body>

:ﻪﺠﯿﺘﻧ

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>
</html>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024