سی ایس ایس @font-face قوانین

تعریف و استعمال

@font-face قوانین کا استعمال سے، ویب ڈیزائنر کو کوئی بھی 'سیکورٹی نیٹ ورک' فونٹ استعمال کرنے کی ضرورت نہیں ہوگی。

@font-face قوانین میں آپ کو ابتدا میں فونٹ کا نام (مثلاً myFirstFont) ڈینیفائن کرنا چاہئے، بعد ازاں فونٹ فائل کو نکالنا چاہئے。

تذکرہ:فونٹ کا یو آر ایل چھوٹی حروف کا استعمال کریں۔ بڑی حروف کا استعمال آئی ای میں غیر متوقع نتائج پیدا کر سکتا ہے!

اگر آپ فونٹ کو ایچ تی ایم ال عناصر میں استعمال کرنا چاہتے ہیں تو فونٹ کا نام (myFirstFont) کو font-family پر رجوع کریں:

div {
  font-family: myFirstFont;
}

دوسری بات دیکھیئے:

سی ایس ایس درس:CSS Web ਫੰਟ

实例

ایک نام 'myFirstFont' والا فونٹ کا ذکر کریں اور اس کا یو آر ایل جواسکتا ہے:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

亲自试一试

صفحہ کے نیچے مزید TIY مثال تلاش کرسکتے ہیں。

سی ایس ایس گرامر

@font-face {
  font-properties
}
فونٹ ڈسکریپشن مقادیر وصف
font-family name ضروری ہے۔ فونٹ کا نام ڈینیفائن کرتا ہے。
src URL ضروری ہے۔ فونٹ ڈاؤن لوڈ کا یو آر ایل ڈینیفائن کرتا ہے。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义应如何拉伸字体。默认值是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体样式。默认值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认值是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 Unicode 字符范围。默认值是 "U+0-10FFFF"。

更多实例

实例

您必须添加另一个 @font-face 规则，其中包含粗体文本的描述符：

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

亲自试一试

文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当设置字体族 "myFirstFont" 的一文本应呈现为粗体时，浏览器就会使用它。

这样，您可以为同一字体设置多个 @font-face 规则。

浏览器支持

Internet Explorer、Firefox、Opera、Chrome 和 Safari 都支持 @font-face 规则。

表格中的数字注明了完全支持字体格式的首个浏览器版本。

ਫਾਂਟ ਫਾਰਮੈਟ
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ 3.2 ਸਮਰਥਨ ਨਹੀਂ ਹੈ
EOT 6.0 ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ

* Edge ਅਤੇ IE: ਫਾਂਟ ਫਾਰਮੈਟ ਸਿਰਫ਼ "installable" ਰੂਪ ਵਿੱਚ ਵਾਲਿਡ ਹੈ

* Firefox: ਮੂਲ ਰੂਪ ਵਿੱਚ ਆਉਣ ਵਾਲਾ ਹੈ, ਪਰ ਚਾਲੂ ਕਰ ਸਕਦੇ ਹਨ (WOFF2 ਨੂੰ ਵਰਤਣ ਲਈ flag ਨੂੰ "true" ਸੈਟ ਕਰਨਾ ਹੁੰਦਾ ਹੈ).