Google Web Fonts字体粗细无法正确呈现
黑星
我正在尝试在具有两个不同权重（300和800）的html页面中使用Open Sans Web字体。但是这些权重之间的差异很小（已通过IE11和Chrome测试）。您可以在“我得到的东西”和“外观”下面看到这些图片（来自Google字体网站）。
我的结果：
Google的结果：
我的html代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>font test</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
Font Family: Open Sans <br />
font-weight 300: <span id="test">GGG</span><br />
font-weight 800: <span id="test2">GGG</span><br />
</body>
</html>
和CSS：
#test
{
font-family: 'Open Sans' !important;
font-style: normal !important;
font-weight: 300 !important;
font-size: 32px;
}
#test2
{
font-family: 'Open Sans' !important;
font-style: normal !important;
font-weight: 800 !important;
font-size: 32px;
}
mbrrw
我看不到你的体重
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
替换为：
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
它将起作用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Google chrome无法正确呈现字体。
- 2
Google chrome无法正确呈现字体。
- 3
Windows 7上的Chrome无法正确显示Google Web字体
- 4
使用 Google 字体不同粗细的正确方法
- 5
无法呈现Google字体
- 6
正则表达式以捕获Google Web字体的粗细和样式
- 7
正则表达式以捕获Google Web字体的粗细和样式
- 8
错误：google_fonts无法加载字体
- 9
Web字体加载器多种字体粗细
- 10
Web字体加载器多种字体粗细
- 11
Google Web字体在Chrome中呈现效果很差。解决方案？
- 12
Google字体和web2py
- 13
Google Chrome无法正确呈现网页
- 14
Google Chrome无法正确呈现网页
- 15
使用Google Fonts Roboto的字体粗细，正常（400）和粗体（700）工作，浅色（300）不起作用
- 16
字体在Google Chrome上无法正确显示
- 17
无法与Flutter Web上的Google Maps互动（google_maps）
- 18
使用require.js字体插件加载Google Web字体
- 19
Google Web字体在移动Safari和台式机Chrome上的呈现方式有所不同吗？
- 20
如果Windows 7 + 10上也本地安装了Google网络字体“ Open Sans”，则不会以正确的粗细显示
- 21
How can I use google web fonts with phantomjs
- 22
电子邮件设计-Google字体的字体粗细
- 23
处理草图在Web浏览器中无法正确呈现
- 24
如何在Polymer中呈现<google-chart> Web组件
- 25
在Google Web Toolkit中使用自定义字体
- 26
仅在加载Google Web字体后才能绘制到画布
- 27
如何在VueJS应用中使用Google Web字体？
- 28
将多个粗细打包为一种Web字体
- 29
为什么Google字体粗细不起作用？
我来说两句