如何在html上添加不同的数字样式 - How to add different style to numbers on html?

How to add different style to numbers on html?

本文关键字：数字样式添加 html | 更新日期: 2023-09-27

是否可以为页面中的数字设置样式?我想改变字体大小和家庭我的数字在整个页面，例如用户已经插入了一些文本，其中包括文本和数字。我想给这些数字增添一些风格。(body的font-family是X，我希望我的数字的font-family是Y)

我使用php和ORM在服务器端(Symfony框架)。

有解决方案吗?

这里有一个可以帮助你的解决方案。每次你想在你的html页面里放一个数字你就用<span class="numbers"></span>把它包起来然后在css文件中添加你的样式，像这样

.numbers
{
    color : red;
    /* your code */
}

如果您正在使用PHP并从数据库中检索数据，则必须在显示所有数字之前包装它们。解决方案是创建一个函数，应用于从数据库获得的每一列。函数是:

function wrap_numbers($str)
{
    preg_match_all('!'d+!', $str, $matches);
    foreach ($matches[0] as $key => $value)
        $str = preg_replace('/ '  . $value . '/',  "<span class='numbers'>" . $value . "</span>", $str, 1);
    return $str;
}

现在假设数据库中有一个列的值为:

$str = "This is a number 123 this is another one 456";

在打印$str之前，必须像这样应用函数

$str = wrap_numbers($str);

如果你打印$str，你会得到不同风格的数字，如果你想知道$str里面到底是什么，你可以这样做

var_dump($str);

，结果是:

string 'This is a number<span class='numbers'>123</span> this is another one<span class='numbers'>456</span>'

你可以用span标签包装你的数字，这将有一个特殊的CSS设置。例如

html:

some text <span class='prettyNumber'>123</span> other text

css:

.prettyNumber{
    font-size: 2em; /** or anything you want **/
}

数字只是一种文本类型，你可以像设置其他字符串的样式一样设置它们的样式——将它们包装在元素中并添加样式。如果你想在后期处理中添加样式，例如通过从页面解析它们，那么就不要这样做，这肯定不是一个好方法。

更新包装结果:

从数据库中检索字符串并将其存储在例如$result中之后，您可以执行以下操作来包装其中的数字:

$result = 'some 123 example string';
$numberRegex = '/('d+)/i';
$replacement = "<span class='prettyNumber'>${1}</span>";
preg_replace($numberRegex, $replacement, $result);

这将改变$result的值为some <span class='prettyNumber'>123</span> example string。虽然我还没有测试过，但我认为你已经明白了;)