html - Raleway font adding additional padding to the top of text on Windows only -
i'm using raleway font provided google's web fonts , have found on windows 7 machine (tested ie9, firefox, chrome, safari) addtional padding appears added top of text. when check out on mac (tested firefox, chrome, safari) it's fine. if pick different font google's web fonts, it's fine (at least ones checked out). has else ever come across , know of way 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; }
different browsers have different default settings things padding, margins, , line-heights. sure have reset default styles equally across them.
Comments
Post a Comment