آموزش فونت های وب در CSS3

saber

4 سال پیش

امتیاز دهید post

آموزش فونت های وب در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فونت های وب در CSS3 خواهیم پرداخت.

فونت های وب برای اجازه دادن به فونت ها در CSS استفاده می شوند، که روی سیستم محلی نصب نشده اند.

(TrueType Fonts (TTF

TrueType یک استاندارد فونت طرح کلی است که توسط اپل و مایکروسافت در اواخر دهه 1980 ساخته شده است و به رایج ترین فونت ها برای هر دو سیستم عامل ویندوز و MAC تبدیل شده است.

(OpenType Fonts (OTF

OpenType قالبی برای فونت های قابل مقیاس پذیری رایانه است و توسط مایکروسافت ساخته شده است

(The Web Open Font Format (WOFF

WOFF برای توسعه صفحه وب استفاده می شود و در سال 2009 توسعه یافته است. اکنون با استفاده از توصیه W3C از آن استفاده می شود.

SVG Fonts/Shapes

SVG فونت های SVG را در اسناد SVG مجاز می داند. همچنین می توانیم CSS را با ویژگی font face به SVG اعمال کنیم.

(Embedded OpenType Fonts (EOT

EOT برای توسعه صفحات وب استفاده می شود و در صفحات وب جاسازی شده است ، بنابراین نیازی به اجازه دادن به قلم های شخص ثالث نیست

کد زیر کد نمونه فونت face را نشان می دهد –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      &lt;/Style&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;div&gt;This is the example of font face with CSS3.&lt;/div&gt;
      &lt;p&gt;&lt;b&gt;Original Text :&lt;/b&gt;This is the example of font face with CSS3.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

@font-face {

font-family: myFirstFont;

src: url(/css/font/SansationLight.woff);

}

div {

font-family: myFirstFont;

}

</Style>

</head>

<body>

<div>This is the example of font face with CSS3.</div>

<p><b>Original Text :</b>This is the example of font face with CSS3.</p>

</body>

</html>

این نتیجه زیر را ایجاد می کند –

This is the example of font face with CSS3.
Original Text :This is the example of font face with CSS3.

1 2	This is the example of font face with CSS3. Original Text :This is the example of font face with CSS3.

توضیح فونت ها
لیست زیر شامل تمام توضیحات فونت هایی است که در قانون font-face@ قرار داده شده است –

font-family

برای تعریف نام فونت استفاده می شود

src

برای تعریف URL استفاده می شود

font-stretch

برای یافتن چگونگی کشیده شدن فونت استفاده می شود

font-style

برای تعریف سبک قلم ها استفاده می شود

font-weight

برای تعریف وزن فونت (بولد بودن) استفاده می شود

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش فونت های وب در CSS3

آموزش فونت های وب در CSS3

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش فونت های وب در CSS3

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه