CSS at rule |

1月 13, 2022 | Nix.Huang

CSS at rule @rule 让浏览器执行特殊的指令
@font-face 让浏览器加载外部字体
google 'Material Icons' 开启了图形化字体的先河，这种方式的效果是一次可以下载多个图标，

使用方式也简单

由于

<style text='text/css'>
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(./MaterialIcons-Regular.woff2) format('woff2'),
    url(./MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
}
</style>
<span class="material-icons">face</span>

@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: local('Material Icons'),

local('MaterialIcons-Regular'),

url(./MaterialIcons-Regular.woff2) format('woff2'),

url(./MaterialIcons-Regular.ttf) format('truetype');

}

.material-icons {

font-family: 'Material Icons';

}

</style>

wordpress 的dashicons 如出一辙，本地使用wordpress 演示
<span style="font-family:dashicons"</span> 效果如下

Posted in: IT人生

知行合一，止于至善

CSS at rule

站内搜索