Opera-win-12.02的糟糕的字体渲染

最新推荐文章于 2025-09-11 22:10:09 发布

weixin_34214500

最新推荐文章于 2025-09-11 22:10:09 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/insongr/blog/85739

本文探讨了如何在HTML5模板中通过@font-face应用网络字体以实现跨浏览器一致的英文字体和中文字体显示效果，特别关注了SourceCodePro字体在IE8、Chrome22、Nightly19、Opera12等浏览器的表现差异。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>创建一个基本HTML5模板</title>
	<style type="text/css">
	body {
		font-family: "Source Code Pro","Microsoft YaHei",微软雅黑;
	}
	</style>
</head>
<body>
	Hi,你好吗？
</body>
</html>

该段代码在IE8、Chrome 22、Nightly 19中达到了英文字体使用 "Source Code Pro"，中文使用微软雅黑的目的。但是在Opera 12中却全部显示为微软雅黑。如下图：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>创建一个基本HTML5模板</title>
	<style type="text/css">
	@font-face {
		font-family: "SourceCodePro";
		src: url("http://localhost:8888/music/assets/font/SourceCodePro/TTF/SourceCodePro-Regular.ttf") format("truetype");
		font-weight: normal;
	}
	body {
		font-family: SourceCodePro,"Microsoft YaHei",微软雅黑;
	}
	</style>
</head>
<body>
	Hi,你好吗？
</body>
</html>

该段代码使用 @font-face 将 "Source Code Pro"字体变为网络字体后，不考虑IE8的情况下， Chrome 22、Nightly 19依旧正常，但是Opera 12英文显示正常，可中文却使用了Opera默认中文字体宋体。如下图：