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

Question

我制作了一个小登陆页面，客户想要：“文本，采购和贸易，CCTV 安全。想要使用重写。然后一切都会好起来的。”我在谷歌上搜索了什么是过度打印，我不得不承认我对这个概念有点模糊，不知道如何用 CSS at.

来实现它

我试过的代码在下面的代码片段中。提前致谢。

<!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;

我想知道是否仅此而已，还是有其他选择。

Answer 1

首先，我会问我的客户他的意思是什么。大多数人说删除线是指多划线。

对于这些按钮，您只需将其添加到 css。

text-decoration: line-through;

至于重写，这是打字机时代使用的一种古老技术，用于书写不在 "Keyboard" 上的字母。这真的没有意义了。

干杯！

Answer 2

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

因为事实证明（至少对于我的设备而言）内联 «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» 属性来平滑他们系统的间距（如果存储 space 我们溢价）。

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

How to achieve overstriking text effect with css?

html

css

typography

bootstrap-4