Question

我已经做了很多搜索，并在网站上遇到了类似问题的不同解决方案但由于某些原因我仍然无法解决我的@ font-face在chrome和firefox中仍然是粗体的问题。在野生动物园中渲染得很好。

我的CSS：

@font-face {
font-family: 'Canela Web';
src: url('/fonts/canela/Canela-ThinItalic-Web.eot');
src: url('/fonts/canela/Canela-ThinItalic-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/canela/Canela-ThinItalic-Web.woff2') format('woff2'),
url('/fonts/canela/Canela-ThinItalic-Web.woff') format('woff');
font-weight: 100;
font-style: italic;
font-stretch: normal;
}

@font-face {
font-family: 'Canela Web';
src: url('/fonts/canela/Canela-Thin-Web.eot');
src: url('/fonts/canela/Canela-Thin-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/canela/Canela-Thin-Web.woff2') format('woff2'),
url('/fonts/canela/Canela-Thin-Web.woff') format('woff');
font-weight: 100;
font-style: normal;
font-stretch: normal;
}

html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}

h1 {
font-family: Canela Web !important;
font-weight: 100
}

h1 {
font-size: calc(35px + 45 * ((100vw - 768px) / 952));
line-height: calc(45px + 45 * ((100vw - 768px) / 952));
letter-spacing: -.5px
}

HTML

<h1 class="featured-projects__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</h1>

我不确定我是否只是在我的CSS中忽略了一些明显的东西，但是在解决chrome和firefox问题时遇到了一些问题。

任何帮助将不胜感激。如果需要，我也可以提供链接。

提前致谢。

@ font-face在chrome和firefox中呈现粗体

0 个答案: