- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在我的网站上使用 Oswald ( http://www.google.com/fonts/specimen/Oswald) 和 Bebas Neue (http://dharmatype.com/dharma-type/bebas-neue.html)。
我正在通过 font-face
加载两者(Oswald 通过 Google Web Fonts,但这是相同的过程)。
但是,当使用相同的字体大小定义时,字体本身的高度会显着不同(例如,font-size:14px
会呈现两种截然不同的大小)。
我需要它们呈现相同大小的页面才能正常工作。
两个问题:i) 是什么导致了这种差异,以及 ii) 可以做些什么来解决它?最好符合 IE8。
谢谢
最佳答案
答案 1:字体中的字形位于 Canvas 上。他们需要周围的空白才能相互定位。白色的量不同。原因之一是 x 高度与上升器 (bdfhklt) 和下降器 (gjqpy) 大小之间的比率。如果字体具有相对较小的 x 高度(较大的 (as/de)cenders),则字形周围的白色比 x 高度相对较大的字体要多。有更多的变量会影响白色的数量。大写/小写比例和字体粗细。
答案 2:没有损坏。您可以使用 css 并相对设置 font-size 并更正文本的大小。
您可以将图像滚动到浏览器窗口的边缘以检查字形对齐的位置。
上:无调整
中间:相同的 x 高度。这看起来不错!
底部:相同的资本高度。这就是您所需要的,因为您的一种字体全是大写字母。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
border: 1px solid red;
line-height: 1EM;
font-size: 600%;
margin: 0 0 0.1EM 0;
}
.arial { font-family: 'Arial'; }
.times { font-family: 'Times New Roman'; }
.times_same_x_height { font-size:116%; }
.times_same_capital_height { font-size:108%; }
.font_stack { font-family: "Does not exist", serif; }
</style>
</head>
<body>
<p>
<span class="arial">xH</span>
<span class="times">xH</span>
</p>
<p>
<span class="arial">xH</span>
<span class="times times_same_x_height">xH</span>
</p>
<p>
<span class="arial">xH</span>
<span class="times times_same_capital_height">xH</span>
</p>
</body>
</html>
注释 0:如果它看起来正确,那就是正确的。所以不要使用 x-height 并完成它。有时明显的大小差异会使字体组合更加和谐。用你的眼睛(和大脑)。
注1:我把文字放在同一个段落里。我这样做是因为它对齐了基线。但更有可能的是,您的文本元素彼此分离。定义正确的 line-height
和 margin
来定位。使用相对值。有时会有一点基线偏移:.shift { top: -.01EM;职位:相对; }
注2:如果你的字体不存在。 font_stack 将使用下一个最佳字体。意识到您的精美排版适用于堆栈中的所有字体!
提示:如果你想稍微改变字体的粗细。你可以让颜色稍微浅一点。例如。从黑色到非常深的灰色。这将使它看起来不那么大胆。
奖励:IE 将遵守。
欢迎反馈。
关于css - 如何标准化不同字体系列的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18445514/
某人在 Silverlight posted MVVM 目前缺乏标准化,所以每个人都有自己的风格.. 这就是为什么我和 WPF Disciples 的一些人正在积极讨论每个人都同意的 MVVM 元素。
我有以下数据集: dat tests2 * 20 Score 1 13.333333 2 10.666667 3 2.666667 4 9.333333 5 13.3333
我有一个 double 组,表示某些事件发生的概率,[25,25,25,10,15] 表示事件 A,B..E。这些数字加起来是 100。 通过我的分析,我希望能够排除某个事件发生或不发生的可能性。 所
USPS webtools 很贵,而且 Google Maps 没有某些地址。有没有免费或开源的解决方案? 最佳答案 根据您的业务性质,或者如果您是非营利或教育机构,有一家在线提供商可为您提供 fre
我有一个 json 对象,里面有对象例如 user: {"name": "tim"} 并希望有一种方法将其转换为 "user.name": 'tim' 我已经尝试过:Javascript Recurs
我有一个名为 spam 的数据集,其中包含与垃圾邮件相关的 58 列和大约 3500 行数据。 我计划将来对此数据集运行一些线性回归,但我想事先进行一些预处理并将列标准化为均值和单位方差为零。 我被告
我试图找到一种方法来强调音频中高点和低点之间的差异。我似乎找不到有关如何执行此操作的文档-也许可以使用ffmpeg完成。非常感谢来自对信号处理了解更多的人的一些指导。 最佳答案 从根本上讲,膨胀器与压
如何缩放/规范化每行数据(观察)?像 [-1:1] 这样的 z 分数? 我看过之前的帖子,其中涉及整个数据集的标准化,如下所示 https://stats.stackexchange.com/ques
例如: http://www.google.co.uk www.google.co.uk google.co.uk 将全部转换为: google.co.uk 我本来想使用 System.Uri 类,但
我可以使用此代码从 json 文件导入数据... import requests from pandas.io.json import json_normalize url = "https://da
规范化 Prolog 原子中空白字符(空格、换行符、制表符)的最佳方法是什么,例如在 SWI-Prolog 中。IE。我想要一个规则: normalize_space_in_atom(+Atom1,
如何缩放/规范化每行数据(观察)?像 [-1:1] 这样的 z 分数? 我看过之前的帖子,其中涉及整个数据集的标准化,如下所示 https://stats.stackexchange.com/ques
我正在尝试阅读代码片段,但它对我来说没有任何意义。请帮助我 /** * To make it easy to query for the exact date, we normalize all
我是一名研究人员,拥有大约 17,000 份自由文本文档,其中大约 30-40% 与我的结果相关。是否有一个开源工具可以用来确定与结果相关的最常见的单词(甚至短语,但不是必需的),并对已经出现的单词的
我正在尝试使用 L2 范数(单位长度)对 numpy 矩阵的行进行标准化。 当我这样做时,我发现了一个问题。 假设我的矩阵“b”如下: 现在,当我对第一行进行标准化时,如下所示,它工作正常。 但是当我
我有一个 3 列数组。数组的第一列的值介于 1 和 10 之间。我需要提取第一列为 1 的所有行,并规范化该数组切片的第三列。然后对第一列等于 2 等的所有行重复相同的操作。 如果我运行此代码,它会使
如果我通过许多不同的文件/脚本使用这个结构当需要更改时,如何才能只更改一个地方,而不必在每个文件中更改它。 u = contents incomingUrl = urlparse(u).query o
我有 1MB 的文本文件。我想删除空格、换行符、制表符,并以 4KB 迭代方式将 1MB 文件的字符大小写从小写转换为大写。 我写了这段代码: for (i = 0, j= 0; i 首先,让我们定
这实际上是一个机器学习分类问题,但我想有一种非常好的快速而肮脏的方法来做到这一点。我想将描述 NFL 球队的字符串(例如“San Francisco”或“49ers”或“San Francisco 4
我正在创建游戏评论数据库。我对此很陌生,但我正在尽力。关于数据库的一点点:系统很简单,用户填写 php 表单,在其中插入他的姓名、电子邮件,然后选择反馈是好还是坏并留下评论/建议。我正在添加照片的视觉
我是一名优秀的程序员,十分优秀!