如何获得漂亮的字体模糊？ （以及如何模仿Medium.com字体样式？）

Question

我确实为我的网站购买了Charter和Kievit。

字体正常，与Medium.com

使用的相同

我使用Jekyll并且在大多数浏览器中平滑都可以，但Safari。

如何获得更接近Medium.com的字体渲染。他们的网站已经确定了网络字体的里程碑。

这是我网站的外观：

这就是Medium.com的样子：

我发现我的网站字体更宽，更短，更厚/更模糊。

这是我的文件`fonts.css``

的一部分

@font-face {
  font-family: 'Charter';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/charter.eot');
  src: url('../fonts/charter.eot?#iefix') format('embedded-opentype'),
  url('../fonts/charter.woff2')  format('woff2'),
  url('../fonts/charter.woff') format('woff'),
  url('../fonts/charter.ttf') format('truetype');
}

@font-face{
  font-family: 'Kievit';
  font-weight: normal;
  font-style: normal;
  src:url('../fonts/kievit.eot?#iefix');
  src:url('../fonts/kievit.eot?#iefix') format('eot'),
  url('../fonts/kievit.woff2') format('woff2'),
  url('../fonts/kievit.woff') format('woff'),
  url('../fonts/kievit.ttf') format('truetype');
}

致以最诚挚的问候，

Answer 1

您是否检查过Medium.com中的元素？检查您通过Chrome开发者工具分享的博客标题的 H3 ，显示以下ccs呈现的样式

＆＃13;

＆＃13;

-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: medium-content-sans-serif-font, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Arial, sans-serif;
font-size: 32px;
font-style: normal;
font-weight: bold;
height: 36px;
letter-spacing: -0.64px;
line-height: 36.8px;
margin-bottom: 0px;
margin-left: -2px;
margin-right: 0px;
margin-top: 39px;
visibility: visible;
width: 702px;
word-wrap: break-word;

＆＃13;

＆＃13;

＆＃13;