php - 带有 php 和/或 CSS 的字体大小

Question

我正在尝试产生一种效果，即我在大写字母的页面上都有标题。但是，我希望看到每个单词的第一个字符具有稍大的字体大小。

例如：

我的头衔

M 和 T 的字体大小为 16，单词的其余部分大小为 12。我从数据库 (MySQL) 中提取标题，因此“我的标题”只是一个示例。可以是任何措辞。

我意识到有一种方法可以使用 substr （在 php 中）并搜索每个单词末尾的空格位置。但在我看来，这似乎会让编码变得有点混乱。

有人有更好的建议吗？

Answer 1

我认为这样的东西是你正在寻找的。

PHP

<?php
$text = "My Title";
$newText = preg_replace('/(\w)(\w+\b)/', '<span class="firstLetter">$1</span>$2', $text);

echo $newText;  // <span class="firstLetter">M</span>y <span class="firstLetter">T</span>itle

CSS

.firstLetter{font-size: 125%;}

Answer 2

通过将每个首字母包装在标签中来使用CSS 首字母伪元素：<span>

p span:first-letter
{ 
    font-size: 16pt;
}

Answer 3

纯PHP解决方案：

<?php
$str = '<h2><big>S</big>ome <big>t</big>ext</h2>';
echo strtoupper($str);
?>

CSS 解决方案：

<h2><span class="larger">S</span>ome <span class="larger">T</span>ext</h2>
<style type="text/css">
h2{text-transform:uppercase;}
.larger{font-size:larger;}
</style>

附加方法：如果您希望能够输出具有可变字数的特定格式，您可以执行以下操作：

<?php
$string = 'VariaBle Number oF WORds!';
$words = explode(' ', $string);
$modified = array();
foreach($words as $word)
{
    $modified[] = '<big>'.substr($word, 0, 1).'</big>'.substr($word, 1, strlen($word));
}
echo strtoupper(implode(' ', $modified));
?>

Answer 4

简单的 CSS 属性，

font-variant:small-caps;