相关疑难解决方法(0)
为什么某些字体的元素的scrollHeight和clientHeight不一样？
对于某些字体,当line-height元素小于阈值时,scrollHeight大于clientHeight.
因此,字体属性中有一些东西会导致这种情况,但是这是什么以及如何避免使用CSS甚至是自定义字体的字体编辑器？
例如,在这个片段中scrollHeight的Tahoma是超过clientHeight虽然sans-serif时似乎确定line-height为1 时,该页面在浏览器(CTRL +)被缩小这种差异会增加,甚至无衬线发生.当行高低于1或字体大小变大时,差异会增加.
对于其他一些字体,它在行高1处达到5px,并通过将行高增加到2而减小,这导致计算错误.
var a = document.getElementById('a');
console.log('tahoma - a.clientHeight: ' + a.clientHeight);
console.log('tahoma - a.scrollHeight: ' + a.scrollHeight);
var b = document.getElementById('b');
console.log('sans - b.clientHeight: ' + b.clientHeight);
console.log('sans - b.scrollHeight: ' + b.scrollHeight);
var c = document.getElementById('c');
console.log('sans - lineHeight:0.5 - c.clientHeight: ' + c.clientHeight);
console.log('sans - lineHeight:0.5 - c.scrollHeight: ' + c.scrollHeight);
var …推荐指数
解决办法
查看次数
如何计算字体大小？
我有一个复杂的js函数,其中我实际上需要了解像素字体大小占用多少空间.
我注意到某些字体的大小因字体而异.
如何计算字体的大小？如果它设置为12px,在CSS中,是什么12px意思？那那么12px宽吗？高？还是对角线像素测量？
推荐指数
解决办法
查看次数
Safari中的文本位置与其他浏览器中的位置不同
Safari中的文本与其他浏览器中的文本位置不同.这有什么理由吗？是否有一种风格可确保其满足精确测量.
* {
margin: 0;
padding: 0;
}
#btn_signup {
opacity: 1;
position: absolute;
width: 185px;
height: 50px;
left: 10px;
top: 10px;
overflow: visible;
}
#Rectangle_1 {
opacity: 1;
fill: transparent;
stroke: rgb(67, 66, 93);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 185px;
height: 50px;
left: 0px;
top: 0px;
}
#Sign_up {
opacity: 1;
position: absolute;
left: 58px;
top: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: visible;
width: …推荐指数
解决办法
查看次数
特定的文本字符可以改变行高吗？
我有这个代码：
<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>
<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>这导致（注意没有下划线和剪切字符）：
也就是说，它在 Firefox（Windows 10 上的 66.0.3）中的行为方式。其他浏览器似乎呈现下划线。上面的代码片段运行器似乎也可以工作（即使在 Firefox 中），除非您在“完整页面”中运行它。
这个Q类似于添加unicode字符后文本更改高度，只是这里没有技巧。“_”只是一个简单的 ASCII 字符。
我的问题是哪种行为是正确的。是否允许特定字符更改行高（我认为它只应该与字体相关）？不应该line-height: 1暗示它可以完全适合任何文本吗？
我想有些字符是特殊的，例如在其线下方绘制的“p”、“g”、“j”（可能还有“_”）。仍然哪种行为是正确的。是否认为溢出？
PS：此外，我觉得很有趣要么 overflow-x: hidden;overflow-y: visible;和overflow-x: visible;overflow-y: hidden;还是引起了这一点。这对我来说更像是一个实际的错误。
推荐指数
解决办法
查看次数
澄清CSS字体大小的测量结果
我正在阅读Eric Meyer第3版的权威指南CSS.
他关于字体大小的部分(第107页)指出字体大小决定了em框.如果我做:
span { font-size: 10px; }
它是否将em盒的水平和垂直精确设置为10px？他将测量称为基线之间的距离.
我想我有点困惑为什么它被称为"盒子"而不仅仅是高度,如果它只是测量垂直距离.
推荐指数
解决办法
查看次数
CSS字体大小细节
我有几个关于字体大小的具体问题:
- pt(IE 12pt)标准化了吗？我想我读到的地方是pt = 1/72英寸.但是,photoshop中24pt字体的大小与css中的24pt字体大小明显不同.
- font-size究竟是什么确定的？它是一种关于字母大小的非标准化的任意描述还是实际上是指字母的特定高度或宽度属性？
谢谢堆栈!
推荐指数
解决办法
查看次数