Html 是否有 CSS 字体大小/行高计算器?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6069335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS Font Size/Line Height Calculator?
提问by JM at Work
I watched some conference recently online, talking abt web typography. There was something mentioned about a web calculator for calculating font-size/line-height
with the golden ratio. Any ideas where can I find it? Or what sizes do you use for your headers?
我最近在网上观看了一些会议,讨论了 abt 网络排版。有一些关于font-size/line-height
用黄金比例计算的网络计算器。我在哪里可以找到任何想法?或者你的标题使用什么尺寸?
回答by amustill
The CSS property 'line-height' actually accepts a pure numerical value, which will work out the line height based on the font size set. If you want to use the golden ratio (1.61803399), then you could set this as the line height in the body.
CSS 属性“line-height”实际上接受一个纯数值,它会根据设置的字体大小计算出行高。如果您想使用黄金比例(1.61803399),那么您可以将其设置为正文中的行高。
body { font: 100%/1.618 sans-serif; }
As an example, setting a H1's font-size to 24px would produce a line-height of 39px (rounded up from 38.832).
例如,将 H1 的字体大小设置为 24 像素将产生 39 像素的行高(从 38.832 向上取整)。
回答by Dimitar Dimitrov
I know this is an old question, but just in case someone is still looking for references, this (awesome) Golden Ratio Typography Calculator
我知道这是一个老问题,但以防万一有人仍在寻找参考,这个(很棒的)黄金比例排版计算器
回答by Subimage
I think what you're looking for is this calculatorfrom this presentation.
回答by Luke
Was it type-scale.com? I use this for calculating all mine. It provides font size and line-height.
是type-scale.com吗?我用它来计算我所有的。它提供字体大小和行高。
回答by icl7126
Those looking for explicitly setting the line-height
with the Golden Ratio, you can use:
那些寻找明确设定line-height
与黄金比例,你可以使用:
line-height: 161.8%;
This will scale properly with different font sizes.
这将使用不同的字体大小正确缩放。