آموزش font-face@ در css
آموزش font-face@ در css
فهرست موضوعات در این آموزش
سلام،
با اموزش html5 و css3 در وب سایت پاسخ همراه باشید،
همانطور که در بخش های قبلی آموزش استایل css به بررسی استایل پس زمینه ها و تگهای html5 پرداختیم ،
در این جلسه ی آموزشی به استایل فونت ها در css می‌پردازیم .
برای ورود به دنیای فونت ها در css تا انتهای آموزش با ما همراه باشید.
خانواده ی فونت ( font family )
ویژگی های خانواده ی فونت با خاصیت font-family تعیین می گردند .
خصوصیت font-family طبیعتا باید دربردارنده ی اسم فونت های متعددی باشد که به عنوان یک نوع سیستم پشتیبانی یا یدکی عمل کند .
در صورتی که مرورگر مورد نظر از نوع حروف (فونت) اولی پشتیبانی نکرد،
در آنصورت فونت دوم را امتحان خوهد کرد .
آموزش HTML5 و CSS3 آموزش font-face@ در css | پاسخ وردپرس |
کافی است با فونت دلخواه کار خود را آغاز کرده، سپس آن را با generic family به اتمام برسانید .
با این کارشما به مرورگر اجازه می دهید در صورت عدم وجود فونت های دیگر، فونتی مشابه را از generic familyانتخاب کند .
نکته چنانچه اسم یک خانواده ی فونت( font family ( متشکل از چندین حروف )بیش از یک حرف) باشد،
درآن صورت باید اسم فونت مزبور را داخل کاراکتر یا علامت نقل و قول دوتایی (double quotation ) قراردهید، مثال “Times New Roman” .
در مثالی که در ذیر ارائه شده، بیش از یک font family در لیست با استفاده از ویرگول از هم جدا شده اند.
|
1 2 3 4 5 |
p { font-family: "Times New Roman" ، "Times ، serif" } |
سبک فونت ها( Font style )
Font style یا همان سبک فونت عمدتا به منظور مشخص کردن متن ها و نوشته های خوابیده و حروف کج بکارمی روند .
خصوصیت نام برده سه مقدار متفاوت دارد
- normal – که در آن متن به صورت عادی نمایش داده می شود.
- Italic – که متن به صورت خوابیده نشان داده می شوند .
- Oblique – که در آن نوشته یا حروف درست مشابه italic متمایل شده یا کج می شوند (بیشر به منظورشبیه سازی حالت italic یا حروف خوابیده بکار می رود)
و اما ویژگی font-face@ در css
با استفاده از دستور @font-face می توانیم فونت سفارشی خود را تعریف کنیم
تا در یک صفحه وب از آن استفاده کنیم که این کار باعث می شود تا از فونت های دیگری علاوه بر فونت های نصب شده بر روی سیستم بهره ببریم.
این اطلاعات شامل منبع، نام، وزن، استایل، کشیدگی و گستره یونیکد و مواردی دیگر می باشند.
دستور زیر ابتدایی ترین حالت را برای تعریف یک فونت نشان می دهد:
|
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Old iOS */ } |
ویژگی src
ویژگی src با استفاده از یک آدرس (URL) منبع کد را مشخص می کند تا مرورگر بتواند فونت را از آن منبع دریافت کند.
این آدرس می تواند یک آدرس محلی بر روی سیستم خودمان باشد و یا آدرس سروری که فونت را نگهداری می کند باشد.
این ویژگی می تواند یک یا چند آدرس بپذیرد که در صورت
چند آدرس بودن نیاز است تا URLهای مختلف بصورت یک لیست و با استفاده از ویرگول از هم جدا شوند.
فرمت های مختلف فونت
مرورگرهای مختلف از فرمت های مختلفی برای فونت ها استفاده می کنند. پس اگر می خواهیم تا فونت مورد نظر در مرورگرهای مختلف به درستی نمایش داده شود باید از فرمت ها مختلف استفاده کنیم.
چهار فرمت اصلی وجود دارند:
(Web Open Font Format) WOFF
این فرمت توسط موزیلا طراحی شد تا داده های فونت را سبک تر و راحت تر فشرده سازی کند و در نتیجه برای وب مفیدتر باشد.
تمام فونت های نوع OTF و TTF قابلیت تبدیل شدن به فرمت WOFF را دارند.
همینطور در این فرمت طراح فونت می تواند لایسنس مربوطه را در خود فایل قرار دهد.
این فرمت به نظر می رسد بهترین فرمت برای استفاده باشد و تمام مرورگرها به سمت این فرمت در حال حرکت هستند.
WOFF2
نسل بعد از WOFF است که فشرده سازی بهتری دارد و سریع تر می باشد.
(Embedded Open Type) EOT
این فرمت توسط شرکت مایکروسافت طراحی شد و تنها فرمتی هست که IE8 و پایین تر پشتیبانی می کنند.
پس زمانی که از این فرمت در دستور font-face استفاده شود فقط همین مرورگرها آن را اجرا می کنند.
(OpenType Font/TrueType Font) OTF/TTF
فرمت OpenType یک فرمت cross-platform می باشد که ویژگی های زیادی برای کنترل تایپوگرافی دارد. OTF از TTF جدیدتر است و ویژگی های بیشتری دارد.
این دو فرمت به راحتی می توانند به صورت قانونی کپی شوند به همین دلیل WOFF از این فرمت کپی شده است تا کارایی این فرمت را بهبود ببخشد.
(Scalable Vector Graphics) SVG/SVGZ
فرمت SVG فونت را بصورت وکتور یا همان برداری بازسازی می کند که این امر باعث می شود تا حجم فایل کمتر باشد و همینطور کارایی بهتری در دستگاههای موبایل داشته باشیم. این فرمت تنها فرمتی است که سافاری روی iOS 4.1 و پایین تر پشتیبانی می کنند.
SVGZ همان SVG از نوع ZIP شده می باشد.
بیشترین پشتیبانی در مرورگرها را داشته باشیم
بعد از دیدن فرمت های مختلف سوالی که در ذهن بوجود می آید این است که از کدامیک استفاده کنیم؟
یا اینکه چطور مطمئن باشیم که همه مرورگرها فونت مورد نظر ما را استفاده می کنند؟
اگر می خواهیم بیشترین پشتیبانی را در مرورگرها داشته باشیم باید شبیه کد زیر فرمت ها را استفاده کنیم.
|
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Old iOS */ } |
اکنون کد ما به خوبی عمل کرده و نتیجه ی دلخواه را بدست می آید
در بخش بعدی آموزش html5 و css3 در وب سایت پاسخ وردپرس،به یاری خدا پروژه نهایی میخواهیم شروع کنیم . با ما همراه باشید.
هنوز بررسی‌ای ثبت نشده است.