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

字体图标(以 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>

在这里插入图片描述

你可能感兴趣的:(html,和,css)