CSS字体我看起来很奇怪

Question

我的CSS中的字体加载有问题。 问题是字体的i点看起来很奇怪：

我使用Roboto 700字体。使用Roboto 500时不会出现此效果。 当改变浏览器的缩放时，它看起来也会更好。

首先，我以这种方式导入了字体：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700);

在这种情况下，渲染没有问题。

由于我想在服务器上保存字体，我使用以下代码：

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
    url('/fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
    url('/fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
    url('/fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

使用这个CSS代码，我得到上图中显示的输出。这里有什么问题？