html - 图标在 Chrome 中被截断(仅在 OSX 上)

Question

我在 Google Chrome 中的自定义 iconfont 有问题，仅在 Mac 上。它们在边缘被切断。我已经尝试过

• 使用更大的 svg 和
• 更喜欢 SVG(在 woff 之前)
• 使用 css 设置

你可以在 kuyichi.com 上看到它(如果你有 Chrome 和 OSX)图标没有边框，四舍五入是图标本身。

有没有人可以解决这个问题？

实时 View : http://i.stack.imgur.com/niqcP.png

icomoon 上的图标包: http://i.stack.imgur.com/PwyCm.png

@font-face {
	font-family: 'iconfont';
	src:url('fonts/iconfont.eot?nr90fm');
	src:url('fonts/iconfont.eot?#iefixnr90fm') format('embedded-opentype'),
		url('fonts/iconfont.woff?nr90fm') format('woff'),
		url('fonts/iconfont.ttf?nr90fm') format('truetype'),
		url('fonts/iconfont.svg?nr90fm#iconfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icons-"], [class*=" icons-"] {
	font-family: 'iconfont';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icons-knit:before {
	content: "\e628";
}

Answer 1

尝试将尺寸信息添加到您的图标声明中:

.icons-knit:before {
    content: "\e628";
    width:40px;
    height:40px;
    font-size:20px;
}