ویژگی font-face@ در css

ویژگی font-face@ در css | تعریف فونت دلخواه سی اس اس

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت font-face@ در زبان css توضیحاتی را ارائه نماییم.

ویژگی font-face@ در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

ویژگی font-face@ در css | تعریف فونت دلخواه سی اس اس

معرفی ویژگی کاربردی font-face@ در زبان طراحی سی اس اس

توسط خاصیت font-face@ می توانیم فونت های دلخواه و سفارشی را در زبان سی اس اس تعریف کنیم.

از طریق این ویژگی می توانیم فونت هایی به غیر از فونت های نصب شده روی سیستم کاربر در صفحه وب برای کاربر به نمایش در بیاوریم.

در داخل خصوصیت font-face@ می توان چندین ویژگی دیگر فونت که حاوی اطلاعاتی برای فونت سفارشی هستند را جای داد.

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

مقادیر صفت کاربردی font-face@ در زبان طراحی سی اس اس

صفت کاربردی font-face@ که در زبان طراحی CSS3 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:

مقدار font-family
مقدار src
مقدار font-style
مقدار font-stretch
مقدار font-weight
مقدار unicode-range

ویژگی font-face@ در css | تعریف فونت دلخواه سی اس اس

مقدار font-family درون خاصیت font-face@ در زبان سی اس اس

اگر خاصیت font-face@ را برابر با مقدار font-family قرار دهیم، یعنی می خواهیم در این حالت اسم فونت سفارشی یا دلخواه را تعیین کنیم.

مثال براساس مقدار font-family برای خاصیت font-face@

[html] div {@font-face: Arial;} [/html]

مقدار src درون خاصیت font-face@ در زبان سی اس اس

اگر خاصیت font-face@ را برابر با مقدار src قرار دهیم، یعنی می خواهیم آدرس منبع فونت سفارشی آپلود شده در ریشه سایت را تعیین نماییم.

مثال براساس مقدار src برای خاصیت font-face@

[html] div {@font-face: src: url(siteamoozi_light.woff);} [/html]

مقدار font-style درون خاصیت font-face@ در زبان سی اس اس

اگر خاصیت font-face@ را برابر با مقدار font-style قرار دهیم، یعنی می خواهیم استایل فونت سفارشی را تعریف نماییم.

مثال براساس مقدار font-style برای خاصیت font-face@

[html] div {@font-face: italic;} [/html]

ویژگی font-face@ در css | تعریف فونت دلخواه سی اس اس

مقدار font-stretch درون خاصیت font-face@ در زبان سی اس اس

اگر خاصیت font-face@ را برابر با مقدار font-stretch قرار دهیم، یعنی می خواهیم میزان کشیدگی عرض فونت سفارشی را تعریف نماییم.

مثال براساس مقدار font-stretch برای خاصیت font-face@

[html] div {@font-face: normal;} [/html]

مقدار font-weight درون خاصیت font-face@ در زبان سی اس اس

اگر خاصیت font-face@ را برابر با مقدار font-weight قرار دهیم، یعنی می خواهیم ضخامت فونت سفارشی را تعریف نماییم.

مثال براساس مقدار font-weight برای خاصیت font-face@

[html] div {@font-face: bold;} [/html]

مقدار unicode-range درون خاصیت font-face@ در زبان سی اس اس

اگر خاصیت font-face@ را برابر مقدار unicode-range قرار دهیم، یعنی می خواهیم گستره یونیکد کاراکترهای فونت سفارشی را تعریف نماییم.

مثال براساس مقدار unicode-range برای خاصیت font-face@

[html] div {@font-face: U+26;} [/html]

مثال دستور کامل font-face@ در سی اس اس

[html]@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 */
}[/html]

ویژگی font-face@ در css | تعریف فونت دلخواه سی اس اس

بررسی خاصیت font-face@ از نظر نسخه زبان طراحی سی اس اس

خصوصیت font-face@ در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

پشتیبانی مرورگرهای اینترنتی از فرمت های مختلف فونت مورد استفاده در خاصیت font-face@ درون زبان طراحی سی اس اس


فرمت فونت
TTF/OTF	4.0	*9.0	3.5	3.1	10.0
WOFF	5.0	9.0	3.6	5.1	11.1
WOFF2	36.0	عدم پشتیبانی	35.0	عدم پشتیبانی	26.0
SVG	4.0	عدم پشتیبانی	عدم پشتیبانی	3.2	9.0
EOT	عدم پشتیبانی	6.0	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی