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>

实际应用:

<style> @font-face { font-family: 'my-font'; src: url('../font/webfont.eot'); /* IE9 */ src: url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/webfont.woff') format('woff'), /* chrome、firefox */ url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } .my-font { font-family: my-font; } </style> <body> <span class="my-font">明月几时有,自己抬头瞅,这里的字体是未自定义的,所以样式未叠加</span> </body>

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

最新回复(0)