如何获得良好的字体平滑效果？ （以及如何模仿 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 标题的样式的一部分：

font-size: 29px;
line-height: 1.04;
letter-spacing: -.028em;
font-weight: 700;

和文章标题行：

line-height: 1.5;
letter-spacing: -.004em;
font-weight: 400;

特别注意

line-height

、

letter-spacing

和

font-weight

Answer 2

您检查过 Medium.com 上的元素吗？检查您通过 Chrome 开发者工具共享的博客标题的 H3，显示以下 ccs 渲染样式

-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;