Code
2023-08-15 08:00:05

如何为相同的字体添加多个字体文件?

我正在查看MDC页面的@font-face CSS规则，但我没有得到一件事。我有单独的文件粗体，斜体和粗体+斜体。如何将这三个文件都嵌入到一个@font-face规则中?例如，如果我有:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

浏览器将不知道要使用哪种字体作为粗体(因为该文件是DejaVuSansBold.ttf)，因此它将默认为我可能不想要的字体。我怎么能告诉浏览器所有不同的变体，我有一个特定的字体?

当前回答

我在styles.less中添加了这样的自定义字体

@font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-LightItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-LightItalic.woff') format('woff'), url('/fonts/EuclidSquare-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Light.woff2') format('woff2'), url('/fonts/EuclidSquare-Light.woff') format('woff'), url('/fonts/EuclidSquare-Light.otf') format('opentype'); font-weight: 300; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-RegularItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-RegularItalic.woff') format('woff'), url('/fonts/EuclidSquare-RegularItalic.otf') format('opentype'); font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Regular.woff2') format('woff2'), url('/fonts/EuclidSquare-Regular.woff') format('woff'), url('/fonts/EuclidSquare-Regular.otf') format('opentype'); } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-MediumItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-MediumItalic.woff') format('woff'), url('/fonts/EuclidSquare-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Medium.woff2') format('woff2'), url('/fonts/EuclidSquare-Medium.woff') format('woff'), url('/fonts/EuclidSquare-Medium.otf') format('opentype'); font-weight: 500; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-SemiboldItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-SemiboldItalic.woff') format('woff'), url('/fonts/EuclidSquare-SemiboldItalic.otf') format('opentype'); font-weight: 600; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Semibold.woff2') format('woff2'), url('/fonts/EuclidSquare-Semibold.woff') format('woff'), url('/fonts/EuclidSquare-Semibold.otf') format('opentype'); font-weight: 600; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-BoldItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-BoldItalic.woff') format('woff'), url('/fonts/EuclidSquare-BoldItalic.otf') format('opentype'); font-weight: bold; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Bold.woff2') format('woff2'), url('/fonts/EuclidSquare-Bold.woff') format('woff'), url('/fonts/EuclidSquare-Bold.otf') format('opentype'); font-weight: bold; } body { font-family: EuclidSquare, Lato, sans-serif; }

2021-10-25 12:06:16

其他回答

我在styles.less中添加了这样的自定义字体

@font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-LightItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-LightItalic.woff') format('woff'), url('/fonts/EuclidSquare-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Light.woff2') format('woff2'), url('/fonts/EuclidSquare-Light.woff') format('woff'), url('/fonts/EuclidSquare-Light.otf') format('opentype'); font-weight: 300; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-RegularItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-RegularItalic.woff') format('woff'), url('/fonts/EuclidSquare-RegularItalic.otf') format('opentype'); font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Regular.woff2') format('woff2'), url('/fonts/EuclidSquare-Regular.woff') format('woff'), url('/fonts/EuclidSquare-Regular.otf') format('opentype'); } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-MediumItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-MediumItalic.woff') format('woff'), url('/fonts/EuclidSquare-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Medium.woff2') format('woff2'), url('/fonts/EuclidSquare-Medium.woff') format('woff'), url('/fonts/EuclidSquare-Medium.otf') format('opentype'); font-weight: 500; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-SemiboldItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-SemiboldItalic.woff') format('woff'), url('/fonts/EuclidSquare-SemiboldItalic.otf') format('opentype'); font-weight: 600; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Semibold.woff2') format('woff2'), url('/fonts/EuclidSquare-Semibold.woff') format('woff'), url('/fonts/EuclidSquare-Semibold.otf') format('opentype'); font-weight: 600; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-BoldItalic.woff2') format('woff2'), url('/fonts/EuclidSquare-BoldItalic.woff') format('woff'), url('/fonts/EuclidSquare-BoldItalic.otf') format('opentype'); font-weight: bold; font-style: italic, oblique; } @font-face { font-family: EuclidSquare; src: url('/fonts/EuclidSquare-Bold.woff2') format('woff2'), url('/fonts/EuclidSquare-Bold.woff') format('woff'), url('/fonts/EuclidSquare-Bold.otf') format('opentype'); font-weight: bold; } body { font-family: EuclidSquare, Lato, sans-serif; }

2021-10-25 12:06:16

解决方案似乎是添加多个@font-face规则，例如:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

顺便说一下，似乎谷歌Chrome不知道格式(“ttf”)参数，所以你可能想跳过这一点。

(这个答案对于CSS 2规范是正确的。CSS3只允许一种字体样式，而不是逗号分隔的列表。)

2010-03-13 00:59:34 
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}
2017-04-08 03:52:36

为了使字体变化正确工作，我必须颠倒CSS中的@font-face的顺序。

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}
2017-03-06 14:16:05

如今,2017-12-17。 我没有在规范中找到任何关于字体属性顺序的必要性的描述。 我在chrome测试总是工作，无论顺序是什么。

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
2017-12-17 04:34:36

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1