代码之家 › 专栏 › 技术社区 › Get Off My Lawn

自定义图标集未在Safari中显示

safari fonts sass css

Get Off My Lawn · 技术社区 · 5 年前

@font-face {
    font-family: 'MyFont';
    src: url('/assets/fonts/MyFont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.my-font-icon {
    font-family: 'MyFont';
    display: inline-block;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

    &:before {
        font-family: 'MyFont';
        display: inline-block;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }

    &.my-font-questions:before {
        content: "\0001";
    }
    &.my-font-chevron-left:before {
        content: "\0002";
    }
    &.my-font-close:before {
        content: "\0003";
    }
}

1 回复 | 直到 5 年前

Nathaniel Flick 5 年前

Safari需要TrueType/ttf字体版本,实际上您应该包括几种不同的类型,而不仅仅是woff2,后者是最现代的类型。以下是CSS技巧文章中的示例列表 here ,浏览器将找到它理解的字体并呈现该字体:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

https://www.fontsquirrel.com/tools/webfont-generator

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前