【问题标题】:Google Chrome not bolding words in HTML webpage谷歌浏览器没有在 HTML 网页中加粗字
【发布时间】:2015-04-12 05:56:49
【问题描述】:

所以我使用的是 Dreamweaver,粗体字出现在 DW 编辑器上,但是当我在 Chrome 中打开网页时,我看不到粗体字。哦,有趣的是,Safari 和 Firefox 似乎显示粗体字,而 Chrome 不能。这让我相信这是一个仅限 Chrome 的问题。我的 Chrome 浏览器怎么了?

这是一个使用粗体文本的sn-p代码:

<strong><br>
        <h4>Membership</h4>
    </strong>
    <p dir="ltr"><strong>Eligibility:</strong> All users must be <strong>18</strong> years of age or older and be eligible to legally work in the U.S.</p>      
    <p dir="ltr"><strong>Account:</strong> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
    <p dir="ltr"><strong>Profile:</strong> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
    <strong>        <br>

这是设置 HTML 样式的内容:

<head>
    <!-- This needs to be on every HTML page -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>ProConnect</title>
    <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/legal.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <meta http-equiv="refresh" content="" >
    <link type="text/css" rel="stylesheet" href="css/legal.css"/>
</head>

CSS:

 .container{
        margin-right: auto;
        margin-left: auto;
    }
    p{
        text-align: justify;
    }

【问题讨论】:

  • 你能添加你得到的代码吗?这将有很大帮助!
  • ....我们应该在没有看到标记/css的情况下给出解决方案??? :)
  • 您的项目中是否嵌入了外部字体?
  • 添加了必要的源代码。我假设你们从经验中知道解决这个问题的一般方法。请记住,这仅适用于 Chrome。其他浏览器显示粗体样式的文本。
  • 您可能只需要为roboto 导入粗体字重。尝试将您的导入更新为:

标签: html css google-chrome dreamweaver


【解决方案1】:

每当您导入自定义字体时,请务必包含您需要的所有粗细和样式。正常字体粗细通常为 400,粗体通常为 700。下面的样式表几乎包含了 Roboto 字体所需的所有内容。

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

【讨论】:

    【解决方案2】:

    你可以用这个简单的方法来加粗单词 使用&lt;b&gt;标签加粗字

    只需添加&lt;strong&gt; 标记,您的单词就不会是粗体,您也必须将此css 规则添加到它font-weight: bold; 只有这样它才会起作用

    <b>bold word</b> normal text
    
    
    <b><br>
            <h4>Membership</h4>
        </b>
        <p dir="ltr"><b>Eligibility:</b> All users must be <b>18</b> years of age or older and be eligible to legally work in the U.S.</p>      
        <p dir="ltr"><b>Account:</b> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
        <p dir="ltr"><b>Profile:</b> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
        <b>        <br>

    我用这种方法在我的网站上加粗

    【讨论】:

    • 嘿,我尝试用 b 替换 strong ,现在它似乎以粗体显示文本。我不确定标签是否是问题所在,或者是否将字体引用更改为&lt;link href='fonts.googleapis.com/css?family=Roboto:400,700'; rel='stylesheet' type='text/css'&gt;
    • 好的,我将另一个网页的文本字体参考更改为 400,700 字体,这改变了游戏规则。它并没有将它从强变为 b
    【解决方案3】:

    您想在 HTML 文件中添加 &lt;b&gt;&lt;/b&gt; 标签而不是 strong 或者您也可以通过 CSS 执行此操作,如下所示:

    strong {
      font-weight: strong;
    }
    

    您也可以以正常方式保留您的文本,只需添加一些颜色以看起来或更吸引人或引人注目:

    strong {
      color: red;
    }
    

    请记住我使用 CSS 包括强标签的一件事,因为您将要装饰的单词保留在 &lt;strong&gt;&lt;/strong&gt; 标签中。

    【讨论】:

      猜你喜欢
      • 2016-01-22
      • 2012-11-29
      • 1970-01-01
      • 2017-08-09
      • 2010-09-07
      • 2017-11-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多