所有字体上升/下降在上面/下面有相同的空间吗? [英] Do all font ascenders/descenders have the same space above/below?

查看:245
本文介绍了所有字体上升/下降在上面/下面有相同的空间吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所有的字体上升/下降都有相同的空间上方/下方?我试图写一个全局样式表,它会从 h1-6 元素中删除顶部和底部空间,我发现这些元素不超过8个像素左右作为 h 元素降低。)我正在考虑这个的原因是因为我不会有任何高个字符将占据上行/下行,所以我真的没有用对于它(加上我需要在我的元素的定位精确的精度。)

我的问题是,如果所有的字体有相同的升序/降序空间,或者如果它变化字体或操作系统或浏览器。

解决方案


所有字体ascenders / descenders上面有相同的空间/以下?

不是

不同字体,按操作系统,按浏览器,也可能是月球周期。你可以期望字体始终不一致。



有些字体甚至没有上下文的概念。如果使用图标字体,你会怎么做?一些字体对齐下降,使他们甚至不下降到基线以下。其他人,如书法字体往往会降到基线以下,无论角色是否具有实际的下降。



当我从页面中创建页面时,包括字体大小的描述,我经常需要渲染一大堆不同的字体大小的特定的家庭。我有一个我在本地使用的实用程序网页,以便我可以确定必须使用哪种字体大小,以及字体对齐方式是什么样的。

示例:



这个例子使用Arial,甚至Arial对于Chrome,Firefox和IE之间的一些尺寸也有不同的呈现。当你使用字体集时,你也必须担心集合中的所有其他选项,以防用户没有安装该字体。






如果您绝对必须有精确的渲染,您应该使用图像来渲染文本。使用 [alt] 属性来引用图像中的文字。它不像文本那样易于管理,因为每次需要内容更改时都需要重新渲染,但是它的效果已经足够好了,特别是对于像绝对必须以指定方式渲染的徽标这样的东西。


Do all font ascenders/descenders have the same space above/below? I'm trying to write a global stylesheet which will take away top and bottom space from h1-6 elements which I found to be no more than 8 pixels or so (which lowers as the h elements lower.) The reason I'm considering this is because I won't have any tall characters which will occupy the ascender/descender so I really have no usage for it (plus I need exact precision in the positioning of my elements.)

My question is if all fonts have the same ascending/descending space, or if it varies by font or OS or browser.

解决方案

Do all font ascenders/descenders have the same space above/below?

Nope

It varies by font, by OS, by Browser, and probably lunar cycle as well. You can expect fonts to consistently be inconsistent.

Some fonts don't even have the concept of ascenders/descenders. What would you do if an icon font was used? Some fonts align descenders such that they don't even descend below the baseline. Others, such as calligraphic fonts tend to drop below the baseline, whether or not the character has an actual descender.

When I'm building pages off of comps that don't include font-size descriptions, I often have to render a large set of varying font-sizes of a particular family. I have a utility webpage that I use locally so that I can determine which font size must be used, and what font alignment will work.

Example:

This example uses Arial, and even Arial renders differently for some sizes between Chrome, Firefox and IE. When you're using sets of fonts you then also have to worry about all the other options in the set, in case the user doesn't have that font installed.


If you absolutely must have an exact rendering, you should be using an image to render the text. Use the [alt] attribute to reference the text in the image. It's not as manageable as text because it requires re-rendering every time a content change is desired, but it works well enough, especially for things like logos which absolutely must render in a specified manner.

这篇关于所有字体上升/下降在上面/下面有相同的空间吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆