Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - CSS (SASS) @font-face : Declared 3 fonts within font-family, 仅加载 2 个

In lại Tác giả: Walker 123 更新时间：2023-11-28 01:51:14 30 4
mua khóa gpt4 Nike

我使用版本 3.2.9 (Media Mark) của SASS 并且我想使用我的自定义 font-family 的 3 个变体Source Sans Pro 字体(Light,Regular,Bold).

đây là của tôi_font.scss 文件:

// the charset to use
@charset "UTF-8";

// the relative path to the fonts directory
$sansSourceProPath: "../fonts/SourceSansPro" !default;

// the font-family
$default-font-family: 'Source Sans Pro';

/*
Light
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-light-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.ttf') format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.svg#sourcesanspro-light') format('svg'); // EDITED
  font-weight: 300; // EDITED
  kiểu phông chữ: bình thường;
}

/*
Regular
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.ttf'), format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.svg#sourcesanspro-regular') format('svg'); // EDITED
  font-weight: 400; // EDITED
  kiểu phông chữ: bình thường;
}

/*
Bold
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.ttf') format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.svg#sourcesanspro-bold') format('svg'); // EDITED
  font-weight: 700; // EDITED
  kiểu phông chữ: bình thường;
}

trong tôi main.scss 文件中，我在 html 标签内声明了默认字体，如下所示:

html {
  font-size: $font-default-size; // 16px
  font-family: $default-font-family; // 'Source Sans Pro'
  font-weight: 300; // EDITED
}

我在测试页面中使用的元素具有以下 CSS 类:

.menu__header {
    cỡ chữ: 1,2em;
    font-weight: 400; // EDITED
    kiểu phông chữ: bình thường;
    chuyển đổi văn bản: chữ hoa;
}

不知何故，在最新的 Google Chrome 30 中，仅加载(请求)Light Và Bold 字体。所需的 Regular 字体既没有请求也没有加载(这让我很困惑，因为我没有声明任何元素使用 Bold 字体，也只有 Light 显示字体)...

我做错了什么吗？

我更新了代码，这样它就不再那么困惑了 - 它仍然只加载 Light Và Bold 字体，从不加载 Regular字体...

câu trả lời hay nhất

光是 font-weight: 300KHÔNG 200 (200 是额外的光)。为什么要将浅字体分配给常规字体粗细，将常规字体分配给粗体等？从长远来看，这只会让一切变得更加困惑。

您可以跳过所有这些，只需在结束前添加即可 标签:


您的问题可能与将浅色面指定为常规、常规为粗体等有关，特别是考虑到您没有对 svg 别名进行更改，这意味着您实际上是在混淆自己的方式使用变量。如果你打算使用轻字体和字体作为你的“正常”字体重量(和粗体等常规)你需要在所有变量上一致地这样做......但实际上你应该只是正常地做方式(regular就是regular，light就是light，bold就是bold)。

关于html - CSS (SASS) @font-face : Declared 3 fonts within font-family, 仅加载 2 个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19932857/

30 4 0
Đề xuất bài viết: c# - 如何检查是否脏，但保存时不检查？
Đề xuất bài viết: javascript - 如何在 ExtReact 中正确布局表单中的元素？
Đề xuất bài viết: html - 如何防止特定元素与其他元素具有相同的样式
Đề xuất bài viết: javascript - IE 上没有图像只有带白色 x 的黑框
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress