将<code>标记设置为类的默认字体样式

Question

有没有办法让CSS类解析文本输入,好像它是预先格式化的,就好像它是<pre>标记一样？通过这个,我的意思是等宽,但也有可能有缩进文本和多个相邻的空格.

Answer 1

一种在当前浏览器中实际运行的方法,但不能保证普遍适用:

.codelike { font-family: monospace; }

在CSS中,没有办法知道浏览器默认使用哪种字体的code元素或pre元素(不清楚你的意思是哪一种).但实际上,浏览器似乎使用与实现通用字体名称相同的字体monospace.但这不是一个要求,他们可能会使用其他东西,而pre不是使用不同的字体code.

请注意,如果您在通用字体名称之前放置任何字体名称,就像在编写样式表时通常应该这样,它将打破这个想法.不同的浏览器具有不同的默认等宽字体,这通常可以由用户更改.

另一方面,如果你只想为code和pre,和你的班级拥有相同的等宽,那么这很容易,例如

code, pre, .codelike { font-family: Consolas, Courier New, monospace; }

注意,默认情况浏览器通常用于相同的元件施加减小的字体大小code和pre,大概是为了在宽字体比其他字体补偿字符的通常较大尺寸(使用相同的字体大小时).不可能在CSS中完全描述这一点,因为它依赖于浏览器并且部分未记录,但如果需要,它可以很容易地被覆盖,例如

code, pre, .codelike { font-size: 100%; }