如何用css实现文字加粗效果？

问题描述 投票：0回答：3

我制作了一个小登陆页面，客户想要：“文本、采购和贸易、闭路电视安全。想要使用粗线。 然后一切都会好起来的。”我用谷歌搜索了什么是重画，我不得不承认我对这个概念有点模糊，不知道如何用 CSS 来实现它。

我尝试过的代码位于下面的代码片段中。预先感谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Welcome</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <style>
    footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height:100px;
  line-height: 10px; /* Vertically center the text there */
  padding-top:10px;
  background-color: #f5f5f5;
  margin-top: 10px;
    }
    .main-buttons {
      width: 400px;
      height: 50px;
      margin: 0  auto;
      text-decoration: line-through;
    }
    span{
      margin-left: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .main-container {
      background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
      height: 100vh;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.9;
      filter: alpha(opacity=90); /* For IE8 and earlier */
    }
    .middle{
      top: 50%;
    }
    .btn-lg {
      box-shadow: 3px 3px #888888;
    }
    h1 {
      text-shadow: 1px 1px #888888;
    }
    .logo {
      width: 50%;
    }
  </style>
</head>
<body class="main-container">
  <div class="container middle">
    <div class="row ">
      <div class="col-md-12 text-center ">
        <div class="intro"> <br> <br>  <br> <br>
          <img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
          <h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
          <p>
            <a href="http://www.wenshin.ltd/index.php">
                <button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button> 
            </a>
            </p>
            <p>
            <a  href="http://www.cctvcamerahd.com/">
                <button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
      <div class="container">
        <span class="text-center"><p><strong>Choose your language:</strong></p></span>
        <span class="text-center"><p><span>English</span>	<span>繁體中文</span>	<span>Español</span>	<span>Português</span> 	<span>Deutsch</span> 	<span>Français</span>	<span>Italiano</span> 	<span>Pусский</span> 	<span>한국어</span> 	<span>日本語</span> 	<span>Nederlands</span> <span>غة العربية 
          </span>	<span>Indonesian</span>
          </p></span>
      </div>
    </footer>
</body>
</html>

我用过：

text-decoration: line-through;

我想知道是否就是这样，或者还有其他选择吗？

html css bootstrap-4 typography
3个回答
2
投票

首先，我会问我的客户这是什么意思。 大多数人通过说“重击”来表示删除线。

您只需将其添加到这些按钮的 CSS 中即可。

text-decoration: line-through;

至于重打，这是打字机时代使用的一种古老技术，用于书写不在“键盘”上的字母。这已经没有任何意义了。

干杯！

1
投票

这只是......我设法回答了我自己的问题。

由于事实证明（至少对于我的设备）内联 «

style
» 属性接受 «
/**/
» 注释，就像它的样式表表弟一样，我认为“好医生”代码会有所帮助，使其更容易关注：

<p style="text-align: justify;">An element with &#xab;position: relative;&#xbb;
  [such as
  <span style="/*Block setup*/display: inline-block; position: relative;
               /*Adjust to match print baseline*/vertical-align: -7.5%;
               /*Block width*/width: 6.5em;">
     <span style="/*Element Name*/position: absolute;
                    left: 0em;">C&#xE6;sium (</span>
     <span style="/*Isotope weight*/font-size: 60%; vertical-align: 55%;
                    position: relative;/**/ left: 6.0em;">133</span>
     <span style="/*Atomic number*/font-size: 60%; vertical-align: -25%;
                    position: relative;/**/ left: 4.6em;">55</span>
     <span style="/*Element Symbol*/position: relative;
                    left: 2.5em;">Cs)]</span>
 </span> is positioned relative to its normal position:</p>`

用户可能需要调整“

width
”和“
left
”属性来平滑系统的间距（如果存储空间非常宝贵，还需要修剪注释）。

0
投票

请注意，字符上方的一行称为上划线，而不是重划线，并且具有 HTML 属性：text-decoration：overline;

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.