css @font-face CSS3 @font-face 规则

css @font-face

@font-face 是 CSS3 中的一个新特性，它允许开发者在网页中使用自定义字体。它可以让网页看起来更加有个性，而不是使用标准的字体。

@font-face 语法很简单，只需要在 CSS 中添加一行代码就可以实现：

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
}

上面的代码声明了一个名为 MyFont 的字体，并且提供了 woff2 和 woff 格式的字体文件。这样，我们就可以在 CSS 中使用这个字体了：

.myclass { 
    font-family: 'MyFont'; 
}

@font-face 还有一些其他属性可以使用，比如 font-style、font-weight 等。这些属性可以帮助我们更好地控制字体的外观。例如：

.myclass { 
    font-family: 'MyFont'; 
    font-style: italic;  // 斜体 
    font-weight: bold;   // 粗体 
}

此外，@font-face 还允许我们使用不同的字体文件来支持不同浏览器。例如：

.myclass { 
    font-family: 'MyFont';  

    src: url('myfont.eot');    // eot 格式  

    src: url('myfont.eot?#iefix') format('embedded-opentype'),    // eot 格式  

    url('myfont.woff2') format('woff2'),    // woff2 格式  

    url('myfont.woff') format('woff'),    // woff 格式  

    url('myfont.ttf') format('truetype');    // ttf 格式  

 }

通过上面的代码，我们就能够在所有浏览器中使用我们想要的字体了。当然，还有其他一些属性可供选择，例如 unicode-range 等。

CSS3 @font-face 规则

div
{
font-family: myFirstFont;
}

@font-face
{
font-properties
}

div
{
font-family: myFirstFont;
}

@font-face
{
font-properties
}