css&scss——字体图标和 web字体

xiaoxiao2021-03-01 13

字体图标（以 icomoon 为例）

CSS

/*导入字体文件*/ @font-face { font-family: huge; src: url("../fonts/icomoon.svg") format('svg'), url("../fonts/icomoon.eot") format('embedded-opentype'), url("../fonts/icomoon.ttf") format('truetype'), url("../fonts/icomoon.woff") format('woff'); } /*属性选择器统一设置属性，不可少*/ [class^='icon'] { font-family: huge; font-style: normal; } /*单独导入字体编码文件*/ .icon-pzs::before { content: '\e948'; font-size: 1.2em; } .icon-phone::before { content: '\e942'; font-size: 1.2em; } .icon-mailbox::before { content: '\e945'; font-size: 1.2em; }

SCSS

$fa-family-name: "FontAwesome"; $icons: ( chaoshengbo: "\e900", duanxian: "\e901", shandian: "\e902", shidu: "\e903", wendu: "\e904" ); @mixin font($file-path) { @font-face { font-family: $fa-family-name; src: url("#{$file-path}.svg") format("svg"), url("#{$file-path}.eot") format("embedded-opentype"), url("#{$file-path}.ttf") format("truetype"), url("#{$file-path}.woff") format("woff"); } [class^="icon"] { font-family: $fa-family-name; font-style: normal; } @each $name, $value in $icons { .icon-#{$name}::before { content: $value; font-size: 1.2em; } } } /* 使用，这里选用相对路径 */ @include font("../../assets/sensor/icomoon");

web字体（以阿里妈妈 webfont 为例）：

第一步：使用font-face声明字体

@font-face { font-family: 'webfont'; src: url('webfont.eot'); /* IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* chrome、firefox */ url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }

第二步：定义使用webfont的样式

.web-font { font-family: "webfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

第三步：为文字加上对应的样式

<i class="web-font">明月几时有，自己抬头瞅</i>

实际应用：

转载请注明原文地址: https://www.6miu.com/read-3349989.html

技术

最新回复(0)

css&amp;scss——字体图标 和 web字体

字体图标（以 icomoon 为例）

CSS

SCSS

web字体（以 阿里妈妈 webfont 为例）：

技术

css&scss——字体图标和 web字体

web字体（以阿里妈妈 webfont 为例）：