相关疑难解决方法(0)
Chrome不尊重字体重量？
我有Arial作为我的基本字体,我试图在页面的不同部分使用各种字体权重(正常,粗体/ 700和900)
这似乎在Firefox和Internet Explorer中都可以正常工作,但在Google Chrome中,粗体/ 700和900之间几乎没有区别!？
(如果以上链接被破坏/无效)
HTML:
<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>
CSS:
p { font-family: arial; font-size: 40px; margin: 0; }
#one { font-weight: normal; }
#two { font-weight: 700; }
#three { font-weight: 900; }
我用Google搜索了一下,发现了一个类似的问题,提供了一个半有用的答案:
解决:
font-weight:900; font-family:"Arial Black",Arial,sans-serif;
但是使用上面这个简单的功能可以让font-weightChrome中的所有内容都达到900(即使另有说明)
有关此示例,请参阅此处(显然在Chrome中)
这是Chrome中的错误吗？或者我在这里做错了什么？
推荐指数
解决办法
查看次数
如何让Open Sans Light在Chrome中运行？
这是一个如何使用Google API的Open Sans的简单示例.预期的行为是显示第一行light(font-weight 300)然后第二行.
就Windows而言,这适用于FF和Edge的当前版本,但不适用于Google Chrome.这样的浏览器显示具有相同正常样式的段落,而不是使用第一段的轻段.
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<style>
</style>
</head>
<body>
<p style="font-family: 'Open Sans'; font-weight: 300;">Foobar</p>
<br>
<p style="font-family: 'Open Sans'; font-weight: 400;">Foobar</p>
</body>
更新:
正如这个问题所暗示的那样,问题是由于与本地安装的字体发生冲突.事实上,请观察local来自Google API的' '字体调用:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
简单地删除本地字体并不是真正的解决方案,因为:
- 如果它在那里它可能是因为某些程序需要它
- 要求网站用户删除其本地字体不是一种选择.
因此,问题仍然存在:
如何在Chrome上(适用于任何用户)使用此功能？为什么其他浏览器会忽略本地字体？
推荐指数
解决办法
查看次数
强制Chrome在CSS中使用外部字体
我花了很长时间才弄明白,Chrome总是喜欢本地安装的字体,而不是在css中链接的同名字体(另请参阅/sf/answers/1939307611/).我的问题是如何弄清楚,迫使Chrome不这样做.
在我的页面https://www.amon.cc/我使用来自Google字体的"Roboto Light"(https://fonts.google.com/specimen/Roboto),如下所示:
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" />
在我的CSS文件中,字体声明如下:
body{
...
font-family:Roboto,...;
font-weight:300;
....
}
在FF,IE,Edge中完美无缺:
但Chrome中的字体总是更厚:
原因:在我的私人Windows 10和商业计算机上,Windows上预先安装了"Roboto"字体:Robot Regular,Robot Condensed.但是没有Roboto Thin或Robot Light,所以Chrome似乎对Roboto Regular有所回落.
从Windows中删除Robot字体集时,Chrome使用声明的Web字体并以我想要的方式显示它.我无法弄清楚,如何"强制"Chrome不使用本地安装,而是使用CDN上的.
但是,Chrome 可以在https://fonts.google.com/specimen/Roboto网站上显示所有不同版本的Roboto字体(即使使用我本地安装的Robot字体).我无法找到如何做到这一点的技巧.
推荐指数
解决办法
查看次数