我遇到了无法解决的问题,我正在使用“Poppins”字体系列。 我在figma中有设计,所以我复制了完全相同的字体粗细、相同的字体大小等,但在网络上仍然不同,它看起来更粗或更模糊,我无法很好地解释它。
CSS:
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-Thin.ttf) format('truetype');
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-ExtraLight.ttf) format('truetype');
font-style: normal;
font-weight: 200;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-Light.ttf) format('truetype');
font-style: normal;
font-weight: 300;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-Regular.ttf) format('truetype');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-Medium.ttf) format('truetype');
font-style: normal;
font-weight: 500;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-SemiBold.ttf) format('truetype');
font-style: normal;
font-weight: 600;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-Bold.ttf) format('truetype');
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-ExtraBold.ttf) format('truetype');
font-style: normal;
font-weight: 800;
}
@font-face {
font-family: 'Poppins';
src: url(fonts/Poppins-Black.ttf) format('truetype');
font-style: normal;
font-weight: 900;
}
* {
font-family: 'Poppins',sans-serif;
}
我是这样处理的。你可以试试。
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;