آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش CSS - فونت های وب (Web Fonts)
فونت های وب برای امکان استفاده از فونت ها در CSS که در سیستم محلی نصب نشده اند استفاده می شوند.
(Different) فرمت های مختلف فونت های وب
| ردیف | فونت و توضیحات |
|---|---|
| ۱ |
(TrueType Fonts (TTF)) فونت‌های تروتایپ TrueType یک استاندارد فونت خطی است که توسط شرکت‌های اپل و مایکروسافت در اواخر دهه ۱۹۸۰ توسعه داده شد. این فونت برای سیستم عامل های ویندوز و مکینتاش شایع ترین فونت ها شده است. |
| ۲ |
(OpenType Fonts (OTF)) فونت‌های اوپن تایپ OpenType یک فرمت برای فونت‌های قابل بزرگنمایی در کامپیوتر است و توسط شرکت مایکروسافت توسعه داده شده است. |
| ۳ |
(The Web Open Font Format (WOFF)) فرمت فونت باز وب WOFF برای توسعه صفحات وب ساخته شده است و در سال ۲۰۰۹ توسط W3C توصیه شد. |
| ۴ |
(SVG Fonts/Shapes) فونت‌ها/شکل‌های SVG SVG به فونت‌های SVG در مستندات SVG اجازه می‌دهد. همچنین، می‌توانیم از ویژگی font-face در CSS برای اعمال CSS به SVG استفاده کنیم. |
| ۵ |
(Embedded OpenType Fonts (EOT)) فونت‌های اوپن تایپ تعبیه شده EOT برای توسعه صفحات وب استفاده می شود و در صفحات وب تعبیه شده است، بنابراین نیازی به استفاده از فونت‌های شخص ثالث نیست. |
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>این مثال از صورت فونت با CSS3 است.</div>
<p><b>متن اصلی :</b>این مثال از صورت فونت با CSS3 است.</p>
</body>
</html>
این مقاله، درس "فونت های وب" را در آموزش CSS3 می‌نویسم. محتوای من در HTML است. محتوای زیر را به فارسی بیان کنید و کلمات CSS3 را با پرانتز در انگلیسی نمایش دهید. عناصر HTML را حذف نکنید و نتیجه را به صورت HTML به من بدهید:
توضیحات فونت‌ها
لیست زیر شامل تمام توضیحات فونت‌هایی است که در قانون font-face @قرار دارند
| ردیف | مقدار و توضیحات |
|---|---|
| ۱ |
font-family (نام فونت) برای تعریف نام فونت استفاده می‌شود |
| ۲ |
src (آدرس) برای تعریف آدرس استفاده می‌شود |
| ۳ |
font-stretch (کشیدگی فونت) برای تعیین کشیدگی فونت استفاده می‌شود |
| ۴ |
font-style (سبک فونت) برای تعیین سبک فونت استفاده می‌شود |
| ۵ |
font-weight (وزن فونت) برای تعیین وزن (ضخامت) فونت استفاده می‌شود |
* تبریک میگم شما درس فونت های وب را با موفقیت مطالعه کردید و به پایان رساندید ،حالا پیش به سوی درس بعدی و یادگیر بیشتر...