仅在Windows上向文本顶部添加附加填充的Raleway字体 [英] Raleway font adding additional padding to the top of text on Windows only
问题描述
我使用Google Web字体提供的Raleway字体，并且发现在我的Windows 7计算机上（使用IE9，Firefox，Chrome，Safari进行测试），addtional填充似乎被添加到文本顶部。当我在我的Mac上检查出来（用Firefox，Chrome，Safari进行测试）就没问题。如果我从Google的Web字体中选择不同的字体，那么很好（至少在我检出的那些字体中）。有没有其他人遇到过这种情况，并知道我可以修复它的方式？
HTML
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title><？php bloginfo（'name'）; ？> - <？php bloginfo（'description'）; ？>< /标题>
< link href =<？php bloginfo（'stylesheet_url'）;？> rel =stylesheettype =text / css/>
< link href =http://fonts.googleapis.com/css?family=Raleway:100&v1 =stylesheettype =text / css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.jstype =text / javascript><<<< ; /脚本>
< / head>
< body>
< p class =test>
Hello World
< / p>
< / body>
< / html>
CSS
体，DIV，DL，DT，DD，UL，醇，LI，H1，H2，H3，H4，H5，H6，预先，代码，格式，字段集，图例，输入，文本区域，p，BLOCKQUOTE，日，TD {余量：0;填充：0;}表{边界崩溃：倒塌;边界间隔：0;}字段集，IMG {边界：0;}地址，标题，引用，代码，DFN，EM，强，日，VAR {字体风格：正常;字体重量：正常;}李{列表样式：无;}标题，第{文本对齐：左;} H1，H2，H3，H4，H5，H6 {字体大小：100％;字体重量：正常;}问：前，q：{内容之后： '';}简称，缩写{边界：0;字体变量：正常;} SUP {垂直对齐：文本机顶;} {子垂直对齐：文本底部;}输入，文本区域，选择{字体家庭：继承;字体大小：继承;字型重量：继承;}输入，文本区域，选择{*字体大小：100％;} legend {color：＃000;}
body {
font-size：62.5％;
}
.test {
font-family：'Raleway'，sans-serif;'Raleway'，sans-serif;
font-size：4em;
text-transform：小写;
font-weight：normal;
font-style：normal;
background：rgb（0,0,0）;
background：rgba（0,0,0,0.5）;
颜色：#fff;
}
8px的填充解决了IE9中的问题，但并未解决所有其他浏览器中的问题。因此，我使用Jarads解决方案创建了一个仅限IE的CSS，现在一切正常。
I'm using the Raleway font provided by Google's Web Fonts and I have found that on my Windows 7 machine (tested with IE9, Firefox, Chrome, Safari) that addtional padding appears to be added to the top of text. When I check it out on my Mac (tested with Firefox, Chrome, Safari) it's fine. If I pick a different font from Google's Web Fonts, it's fine (at least with the ones I checked out). Has anyone else ever come across this and know of a way I can fix it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:100&v1" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<p class="test">
Hello World
</p>
</body>
</html>
CSS
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
body {
font-size: 62.5%;
}
.test {
font-family: 'Raleway', sans-serif;
font-size: 4em;
text-transform: lowercase;
font-weight: normal;
font-style: normal;
background: rgb(0,0,0);
background: rgba(0,0,0,0.5);
color: #fff;
}
Jarads solution of adding a line height of 0.8 and bottom padding of 8px resolved the issue in IE9 but did not resolve the issue in every other browser. Therefore I create an IE only CSS with Jarads solution and everything is OK now.
这篇关于仅在Windows上向文本顶部添加附加填充的Raleway字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
