谷歌浏览器无法正确呈现字体答案

【问题标题】：Google Chrome is not rendering fonts properly谷歌浏览器无法正确呈现字体
【发布时间】：2013-09-02 23:59:17
【问题描述】：

您好，我正在开发这个网站bamboo-intranet.com。最近我注意到菜单中的网站字体在谷歌浏览器上加载不好，没有任何样式就卡住了，我一直在尝试解决这个问题，但找不到什么问题。我想知道是否有人知道我的问题是什么。我还添加了用于菜单的 css 样式和 html 语法，以便您查看是否有问题。

截图：

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="es">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Bamboo - Intranet Software</title>
    <meta name="description" content="Pequeñas, medianas y grandes compañías han implementado Bamboo Intranet como su plataforma de comunicación interna. Organizando, facilitando y agilizando dramáticamente las labores del día a día.">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta property="og:title" content="Bamboo - Intranet Software" />
    <meta property="og:description" content="Pequeñas, medianas y grandes compañías han implementado Bamboo Intranet como su plataforma de comunicación interna. Organizando, facilitando y agilizando dramáticamente las labores del día a día." />     
    <meta property="og:url" content="http://bamboo-intranet.com" />
    <meta property="og:image" content="http://bamboo-intranet.com/img/fbthumb.jpg"/>
    <link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/normalize.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
    <link rel="stylesheet" href="css/sprites.css" />
    <link rel="image_src" href="http://bamboo-intrantet/img/fbthumb.jpg" /> 
</head>
<body>
    <!-- HEADER -->
    <header class="step0">
        <a href="http://bamboo-intranet.com/"><div class="logo"><img src="images/logo-bamboo.png" alt="Bamboo Intranet Software" /><h1>Bamboo - Intranet Software</h1></div></a>
        <nav>
            <ul>
                <li>
                    <a href="#container">CARACTERÍSTICAS</a>
                </li>
                <li>
                    <a href="#screenshots">SCREENSHOTS</a>
                </li>
                <li>
                    <a href="#beta_test">VERSIÓN DE PRUEBA</a>
                </li>
            </ul>
        </nav>
    </header>
    <!-- /HEADER -->

CSS 代码：

nav {
    float: right;
    height: auto;
    margin: 10px 42px 10px 0;
    width: auto;

}

nav ul {
    padding: 0;
    margin: 0;
}

nav li {
     list-style: none;
     float: left;
     font-size: 13px;
     color: #525252;
     margin-right: 5px;
}

nav a {
    text-decoration: none;
    padding: 16px 14px;
    border-radius: 4px;
    line-height: 42px;
    color: #767676;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    font-family: 'Roboto', arial;
}

nav a:hover {
    background-color: #262626;
    color: #ffffff;
}

【问题讨论】：

标签： html css google-chrome fonts google-chrome-devtools

【解决方案1】：

尝试更具体，

nav ul li  {
     list-style: none;
     float: left;
     font-size: 13px;
     color: #525252;
     margin-right: 5px;
}

nav ul li a {
    text-decoration: none;
    padding: 16px 14px;
    border-radius: 4px;
    line-height: 42px;
    color: #767676;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    font-family: 'Roboto', arial;
}

nav ul li a:hover {
    background-color: #262626;
    color: #ffffff;
}

如果这不能解决您的问题，请使用类，如果这不能解决您的问题，请使用浏览器中的检查元素选项并查看 CSS 对 HTML 的作用

你能发布一个网站链接吗？

【讨论】：

你好，链接是 www.bamboo-intranet.com 我实际上有我的风格，但为了测试它而改变了。
嗨，看起来链接正在我的浏览器中测试它们看起来 100% 正确，虽然我不懂西班牙语，但网站上的工作看起来不错。这可能是一个很长的镜头，但一定要在未来检查规范化器，它可能有助于解决这样的问题。这里是链接：necolas.github.io/normalize.css
Cool Man 很高兴你让它工作并让你的老板离开你，真的不知道为什么那个 JS 让它吓坏了，但它确实如此...... 干得好，真的很棒的网站！好好保养