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

最新推荐文章于 2024-08-14 10:42:14 发布

肖ZE

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量1.8k

点赞数

分类专栏： html 和 css

本文链接：https://blog.csdn.net/lucky541788/article/details/82712070

版权

html 和 css 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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