最近在寫網頁的時候，發現一些數字總是會被奇怪的方框包著，很是煩惱。后來經過一番查找，發現是CSS的問題。

p {
font-family: "Microsoft YaHei";
font-size: 16px;
line-height: 1.4;
}
pre {
font-family: "Courier New";
font-size: 1em;
margin: 0;
}

原來這是因為網頁中使用了不同于默認字體的字體，同時數字使用的是默認字體的字形，在不同字形之間所導致的問題。

解決這個問題的方法有兩種：

1. 使用全角數字。在網頁中使用全角數字可以解決這個問題，因為全角數字與字體的字形相關性較小，而且網頁中使用的默認字體也包含全角數字。
2. 指定字體的字形。使用CSS的font-variant-numeric屬性指定字體的字形，可以讓數字使用正確的字形，從而解決這個問題。

p {
font-family: "Microsoft YaHei";
font-size: 16px;
line-height: 1.4;
}
pre {
font-family: "Courier New";
font-size: 1em;
margin: 0;
font-variant-numeric: tabular-nums;
}

在上面的例子中，我們使用了tabular-nums屬性指定字體的字形為“等寬數字”，這樣可以讓數字在輸出時保持等寬，避免被方框包裹。

CSS的這些屬性雖然看似微小，但它們所影響的細節卻千差萬別，我們在編寫網頁時一定要注意這些細節問題，讓我們的網頁更加美觀、易用。