CSS 字体外观声明

Question

我正在处理包含这些和更多@font-face 声明的遗留代码库

@font-face {
    font-family: 'Lato';
    font-weight: $font-weight-thin;
    font-style: $font-style-normal;
      text-rendering: optimizeLegibility;

      src: url('#{$lato-path}Lato-Thin-webfont.eot');
      src: url('#{$lato-path}Lato-Thin-webfont.eot?#iefix') format('embedded-opentype'),
          url('#{$lato-path}Lato-Thin-webfont.woff2') format('woff2'),
          url('#{$lato-path}Lato-Thin-webfont.woff') format('woff'),
          url('#{$lato-path}Lato-Thin-webfont.ttf') format('truetype'),
          url('#{$lato-path}Lato-Thin-webfont.svg#latothin') format('svg');
  }

  @font-face {
    font-family: 'Lato';
    font-weight: $font-weight-thin;
    font-style: $font-style-italic;
      text-rendering: optimizeLegibility;

      src: url('#{$lato-path}Lato-ThinItalic-webfont.eot');
      src: url('#{$lato-path}Lato-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
          url('#{$lato-path}Lato-ThinItalic-webfont.woff2') format('woff2'),
          url('#{$lato-path}Lato-ThinItalic-webfont.woff') format('woff'),
          url('#{$lato-path}Lato-ThinItalic-webfont.ttf') format('truetype'),
          url('#{$lato-path}Lato-ThinItalic-webfont.svg#latothin_italic') format('svg');
  }

很明显，这些引用了 2 个单独的字体文件，但是如果它们都具有相同的字体系列名称，其他版本是否可以访问？

font-family: 'Lato';

Answer 1

是的。请注意，字体样式不同，因此字体将应用于它们各自的字体样式（首先是普通字体，其次是斜体）

CSS 字体外观声明

CSS Font Face declarations

css

sass

font-face