html - 获取 noCopy 文本粗体

Question

这里是新手。

所以我制作了一个显示事件按钮的顶部栏，其中写入了文本“Základ”(基本)，我也想制作它，这样它就不能被复制，这样看起来会更好，所以我做到了。但现在当我想把它变成大胆的时候，我做不到!对 font-weigh: bold; 的作用不同。我使用外部 css 文件。我不想放弃拥有无法复制的大胆标题的梦想，所以我请求或您的帮助。任何适用!

html,
body {
    margin: 0px;
    padding: 0px
}

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.2s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    text-align: center;
    padding-left: 16px;
    font-size: 20px;
}

#posunTlacitka {
    transition: margin-left .4s;
    text-align: center;
}

#posunListy {
    transition: margin-left .5s;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
        
    }
}


/*HORNÍ LIŠTA*/
.topnav {
    overflow: hidden;
    background-color: #333;
}


.topnav a {
    float: left;
    color: rgb(243, 243, 243);
    text-align: center;
    padding: 0px 35px;
    text-decoration: none;
    font-size: 17px;
}

.topnav div {
    float: left;
    color: rgb(243, 243, 243);
    text-align: center;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
    background-color: #62d1ff;
    color: black;
}

/*LIŠTA NELZE KOPÍROVAT!*/
#noCopy::before {
    content: 'Základ';
    display: block;
}

    <div id="posunListy">
        <div class="topnav">
            <div id="posunTlacitka"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
            <a class="active">
                <h2 id="noCopy"></h2>
            </a>
        </div>
    </div>

Answer 1

根据上述评论之一，您的代码段已经显示文本为粗体。当您设置以下内容时，您可以看到这种区别:

#noCopy::before {
    content: 'Základ';
    display: block;
    font-weight: normal;
}

...产生以下片段。如果您在开发环境中没有看到差异，则可能是浏览器缓存问题。无论哪种方式，你已经像拉托一样大胆了，恐怕......

编辑:这将“增强”效果，但这是一种解决方法

本质上，将 -webkit-text-stroke: 1px black; 添加到您的 #noCopy::before 将为您的文本添加轮廓描边，给人的印象较厚的重量

html,
body {
    margin: 0px;
    padding: 0px
}

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.2s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    text-align: center;
    padding-left: 16px;
    font-size: 20px;
}

#posunTlacitka {
    transition: margin-left .4s;
    text-align: center;
}

#posunListy {
    transition: margin-left .5s;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
        
    }
}


/*HORNÍ LIŠTA*/
.topnav {
    overflow: hidden;
    background-color: #333;
}


.topnav a {
    float: left;
    color: rgb(243, 243, 243);
    text-align: center;
    padding: 0px 35px;
    text-decoration: none;
    font-size: 17px;
}

.topnav div {
    float: left;
    color: rgb(243, 243, 243);
    text-align: center;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
    background-color: #62d1ff;
    color: black;
}

/*LIŠTA NELZE KOPÍROVAT!*/
#noCopy::before {
    content: 'Základ';
    display: block;
    -webkit-text-stroke: 1px black;
}

    <div id="posunListy">
        <div class="topnav">
            <div id="posunTlacitka"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
            <a class="active">
                <h2 id="noCopy"></h2>
            </a>
        </div>
    </div>