تمرکز بر روی فایل های فونت

کلید استفاده از فونت های وب، توانایی تعریف فونت در فایلی است که مرورگر هر بازدیدکننده سایت می تواند آن را دانلود و استفاده کند. فایل های فونت حاوی اطلاعات دقیق هستند در مورد اینکه ایستگاه کاری چگونه باید کاراکترها و نمادها را نمایش دهد. با این حال، مشکل فایل های فونت این است که در طول سال ها، فونت های مختلف زیادی وجود دارد فرمت های فایل ظاهر شده است. جدول زیر فرمت های فایل فونت محبوبی را نشان می دهد که ممکن است با آنها مواجه شوید.

فونتی که در دهه 1980 توسط مایکروسافت و اپل ایجاد شد. این نوع فونت هنوز هم معمولاً توسط هر دو سیستم عامل استفاده می شود.   =    TrueType

توسط مایکروسافت ایجاد شده و برای گسترش فونت های TrueType ساخته شده است. رایج ترین نوع فونت مورد استفاده.   =   OpenType

فرمت فونتی که توسط مایکروسافت برای استفاده فقط در اینترنت اکسپلورر ایجاد شده است  مرورگر اینترنت.   =   Embedded OpenType

در درجه اول برای گرافیک در دستگاه های تلفن همراه استفاده می شود، اما می توان از آن برای نمایش متن استفاده کرد.   =   Scalable Vector

Graphics (SVG)

یک فونت ایجاد شده توسط گروه استانداردهای W3C که برای صفحات وب در نظر گرفته شده است.   =   Web Open Font

Format (WOFF)

فرمت های فایل فونت TrueType و WOFF در حال حاضر تنها دو مورد پشتیبانی هستند توسط همه مرورگرها بهتر است هنگام ایجاد یکی از این نوع فونت ها استفاده کنید فونت های وب شما فایل های فونت را اغلب می توان از اینترنت یافت و دانلود کرد. با این حال، مراقب باشید محدودیت های صدور مجوز در فایل های فونت اکثر فایل های فونت رایگان نیستند یا فقط برای استفاده شخصی رایگان هستند.

کار با فونت های وب

CSS3 به شما امکان می دهد یک فایل فونت وب را برای مرورگرهای سرویس گیرنده تعریف کنید تا با استفاده از آن دانلود شوند قانون @font-face. ممکن است متوجه شوید که قاعده font-face@ از هیچ یک از قراردادهای نامگذاری قوانین سبک استاندارد که قبلا این مقاله بحث کردم، پیروی نمی کند. مینی کتاب دلیلی برای آن وجود دارد.

قانون font-face@ یک دستور CSS را تعریف می کند. دستورات CSS دستورالعمل هایی به مرورگر برای انجام برخی اقدامات در حین بارگذاری استایل ها هستند. دستورات CSS با نماد at (@) شروع می‌شوند و باید در ابتدای ناحیه صفحه سبک CSS قرار گیرند.

در اینجا فرمت قانون @font-face آمده است:

@font-face {

font-family: name;

src: url(location);

[descriptor:value];

}

ویژگی font-family یک نام منحصر به فرد برای فونت در شیوه نامه شما تعریف می کند. ویژگی src مکان فایل فونت را در سرور شما یا به صورت یک تعریف می کند مسیر مطلق یا نسبی به دنبال این دو ویژگی، می‌توانید توصیف‌گرهایی را اضافه کنید که زمان فونت را نشان می‌دهند باید استفاده شود (مانند متن پررنگ یا برای متن با حروف کج).

یک مثال از تعریف فونت وب به این صورت است:

@font-face {

font-family: myfont;

src: url(myfont.woff);

}

این یک خانواده فونت به نام myfont را از فایل فونت myfont.woff تعریف می کند ایستگاه کاری مشتری باید دانلود شود. سپس برای استفاده از فونت جدید در صفحات وب خود، فقط نام خانواده فونت را در یک قانون سبک تعریف کنید:

div {

font-family: myfont;

}

سه توصیف کننده وجود دارد که می توانید برای فونت وب تعریف کنید:

»»font-stretch: مشخص می کند که چگونه فونت باید کشیده شود تا یک فاصله پر شود. را پیش فرض نرمال است، اما مقادیر دیگر متراکم یا بزرگ می شوند.

»»font-style: نحوه استایل بندی فونت را مشخص می کند. مقادیر نرمال هستند، مورب یا مورب »»font-weight: بولد بودن فونت را مشخص می کند. مقادیر عادی، پررنگ، یا مقادیر عددی از 100 تا 900. با تعیین مقادیر مختلف سبک فونت و وزن فونت، می توانید موارد بیشتری را تعیین کنید بسته به نحوه استفاده از فونت در صفحه وب، بیش از یک فایل فونت.