在網頁設計中，字體旁邊加上豎線可以起到美化排版的作用，讓網頁看起來更加美觀、整潔。常見的做法是使用 CSS 中的 border-left 屬性來實現，具體方法如下：

font-style: normal;
border-left: 2px solid #000;
padding-left: 10px;

上面的代碼中，font-style 屬性設置為 normal，這是因為有些字體旁邊已經存在斜體效果，不需要再加上斜線。border-left 屬性可以設置豎線的樣式、粗細和顏色，padding-left 屬性可以設置文字與豎線之間的距離。

如果要對某段文字特定的部分添加豎線，可以使用 ::before 或 ::after 偽元素來實現：

p::before {
content: "";
display: inline-block;
width: 2px;
height: 100%;
margin-right: 10px;
background-color: #000;
vertical-align: middle;
}

上面的代碼中，::before 偽元素生成一個空的 inline-block 元素，并在元素前加上豎線。width 和 height 屬性分別設置豎線的寬度和高度，background-color 屬性設置豎線的顏色，margin-right 屬性設置文字和豎線之間的距離。

可以根據實際需求來選擇使用哪種方法來添加豎線，更多關于 CSS 字體樣式的知識可以參考相關教程。