如何在html中设置字体粗体粗体？答案

【问题标题】：How to set font-weight bold in html?如何在html中设置字体粗体粗体？
【发布时间】：2015-03-11 13:47:36
【问题描述】：

HTML

<div class="test">Bold Text. Normal Text</div>

预期输出：

粗体文本。普通文本

我知道为某些文本添加<b>。但这里的条件是不编辑 HTML 页面。通过使用 CSS 或 jquery 需要将某些文本设置为粗体。

提前谢谢...

【问题讨论】：

文本Bold Text. Normal Text 会保持静态吗？还是会改变？
不，只有 CSS 是不可能的。
@rJ7 您不能使用 CSS 选择任意子字符串... 不可能： 形容词，1。不可能;无法存在、无法发生等。 See for yourself。哦，当这个问题被问到时，它只提到了 CSS。 jQuery 是后来添加到问题中的。
@rJ7 他正在复制文本，将其放入 CSS 中。如果 HTML 中的文本发生变化怎么办？充其量是一个不完整的解决方案。

标签： css text formatting

【解决方案1】：

<div class="test">Bold Text. Normal Text</div>

.test {
    font-size:0;
 }

.test:before {
    font-size: 12px;
    content: "Bold Text. ";
    font-weight: bolder;
}

.test:after {
    font-size: 12px;
    content: "Normal Text";
}

http://jsfiddle.net/td92r3jz/

小提琴。

【讨论】：

投反对票的原因是？有一个小提琴链接显示它有效。

【解决方案2】：

JQuery。获取文本，按点分割，用<span> 换行并放回原处。将 CSS 应用到第一个 <span>。（运行 sn-p）

var t = $('.test').html().split('.');
var res = '<span>' + t[0] + '.</span><span>' + t[1] + '</span>';

$('.test').html(res);

.test>span:first-child {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Bold Text. Normal Text</div>

【讨论】：

【解决方案3】：

您可以使用 css 隐藏原始 div 中的文本，并使用 :before 和 :after css-selector 再次使用 css 添加文本

div {
    line-height:1000px;
    overflow:hidden;
    height:30px;
}

div:after {
    content:"bold text";
    position:absolute;
    font-weight: bold;
}

div:before {
    content:"normal text";
    position:absolute;
    font-weight: normal;
}

【讨论】：

如果我隐藏了 div，那么 :after 和 :before 内容将不起作用。错了。
但是 div 没有隐藏。文本被切断，将行高设置为比实际 div 高得多，所以它应该可以工作
不，我只是解释了这个概念！但这是一个可行的例子，所以反对票是错误的！ jsfiddle.net/2bxat3mv我更喜欢 font-size 解决方案，因为代码更少，但有些浏览器有最小字体大小，所以我不认为这是一个跨浏览器解决方案