如何在一个数字中加上句点之前的所有数字？

Question

我正在尝试使用以下CSS更改价格值的字体大小：

h2.bold.value::first-letter {
     font-size: 150%;
}

不幸的是，这仅适用于像（9.99,0.99）之前的单位数字。 CSS中是否有一种方法可以在句点之前更改所有数字的字体大小（ 10 .99， 18 .27， 190 .45等）？

Answer 1

如果值是静态/动态的，那么按照我建议的格式无关紧要：

<p class="val"><span>9999</span>.<span>99</span></p>

在css中

.val {
   //Overall style
}
.val span:first-child {
  //style digits before period
}
.val span:last-child {
  //style digits after period
}

在js中应用它，例如

x = '999.99';
x = str_replace(".","</span>.<span>",x);
x = '<p class="val"><span>' + x + '</span></p>;

Answer 2

无法使用纯css设置数字（小数位，小数点分隔符，千位分隔符等）的样式。即使JS解决方案也不准确。您通常使用span标记并设置样式来解决此问题。

Answer 3

使用伪元素:after

＆＃13;

＆＃13;

div {
  font-size: 30px;
}
div:after {
  content: '.99';
  font-size: 15px;
}

＆＃13;

<div>99</div>

＆＃13;

＆＃13;

＆＃13;

或

＆＃13;

＆＃13;

div{
    font-size:30px;
}
div:after{
    content:attr(data-content);
    font-size:15px;
}

＆＃13;

<div data-content=".99">99</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果不引入仅包含要以粗体呈现的字符的元素，则无法执行此操作。它取决于上下文，您是为元素编写标记还是使用客户端JavaScript动态生成元素。

使用静态标记，您可以编写例如。

<b>10</b>.99

有些人可能称之为“语义错误”，但这确实是加粗字符的最可靠方式。另一种方法是使用HTML标记，如

<span class=int>10</span>.99

和CSS代码

.int { font-weight: bold }

两种方式都需要使用所用字体的粗体字。这在使用Google字体和其他可下载字体时尤为重要。如果没有粗体字体，浏览器通常会使用伪造的粗体（算法/合成粗体），并且排版效果较差。

请注意。设置font-size不会影响粗体，即使将较大的字符与较小的字符进行比较时，较大的字符可能看起来更大胆。