问题标签 [letter-spacing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
4116 浏览

jquery - 单击它所在的 div 后,如何缓慢更改 h1 的字母间距?

我有一个名为“.social”的类,一旦单击 div,我就会打开它。里面是一个 switch case 语句,因此一旦单击它,如果再次单击它,div 就会重新关闭。我只在其中显示一个字母,使用“溢出”和字母间距属性来隐藏其余字母。单击 div 后,我想展开 div,并一起减小字母间距,以便显示所有单词。

jQuery:

CSS:

0 投票
2 回答
5696 浏览

html - CSS 字母间距 SAFARI

我有我喜欢的网站,跨浏览器,虽然我在 CSS 中有字母间距,但在 safari 中它不明白我有什么,它破坏了设计 - 有什么建议吗?这是CSS:

它似乎没有给它任何东西。它在 Mozilla Firefox 中运行良好

0 投票
1 回答
1379 浏览

jquery - Jquery - 仅使用字母间距和单词间距将文本放入元素中

有这个插件吗?我一直在筛选 internetz 并发现 bigText、Justify、fitText、textFit 但它们似乎都适用于我不想做的字体大小。我只希望文本适合具有定义宽度的元素。

HTML:

CSS:

到目前为止,我发现的插件的问题是子标题最终会更大,因为它的字母数量更少。

我找到了这个解决方案,但问题是它给了我一个稍微不平衡的间距,证明

JS

结果是: 在此处输入图像描述

0 投票
4 回答
2111 浏览

css - 使用 fontface 自定义脚本字体字距和字母间距

我在我的网站上使用的名为 Thirsty Script Bold 的脚本字体存在问题。某些字母的字母间距似乎是正确的,但对于其他字母则不正确。我什至没有触及字母间距。你可以在这里看到一个例子:http: //oi40.tinypic.com/2wpikgw.jpg。如您所见,“e”的结尾没有与“b”完全合并,并且“b”太靠右而无法与“s”合并。

我试过弄乱字母间距,但这似乎只会使问题恶化。

这是我的页面CSS-

这是我的页面 HTML-

这是我的字体css-

0 投票
1 回答
2313 浏览

java - 为什么这个字体在 Java 中这么大?

我正在尝试使用 OpenDyslexic 作为 Swing 应用程序中的字体选项。但令人惊讶的是,OpenDyslexic 在相同的磅值下看起来比任何其他字体都要大得多,即使它在其他应用程序中看起来是正常大小的。我尝试了一些其他 OpenType 字体,它们看起来不是特别大或特别小。为什么 OpenDyslexic 在 Java 中如此之大,我怎样才能让 Java 正常调整它的大小,这样我就不必对 OpenDyslexic 的大小进行特殊处理?

在所有操作系统上的 Oracle JRE(我尝试了 1.7.0_11、1.7.0_15 和最新的 1.7.0_21)上,当 Java 使用Font.createFont. 但是,当我将字体安装到操作系统中时,所有 3 个平台上的行为都不同:

  • 在 Linux 中,安装字体~/.fonts没有好处。安装字体之前和安装之后的屏幕截图看起来相同。
  • 在 Windows 中,安装字体修复了字体字形,但字体间距仍然太大!请参阅下面的屏幕截图。
  • 在 OS X 中,安装字体可以修复它!它看起来像 OS X 上的正常大小的字体。

更新:有趣的是,OpenJDK(Linux 中的 7u21 Ubuntu 软件包和 OS X 上的 obuildfactory 构建)没有出现该错误。15pt OpenDyslexic 'm' 在 OpenJDK 上是 15px 宽,无论是从文件创建字体还是由操作系统处理字体时都应该如此。该错误出现在最新的 Oracle JRE 中,但不在最新的 OpenJDK 中。

这是我的示例程序。请注意,要尝试它,您需要将OpenDyslexic文件放入 resources/. 或者,将 OpenDyslexic 安装到您的系统中并registerFonts()拨打电话。

无衬线是正常大小 OpenDyslexic 在相同的点大小下是巨大的 在 Windows 上安装 OpenDyslexic 后,它看起来很愚蠢 在 OS X 上安装字体后:完美!

0 投票
1 回答
341 浏览

internet-explorer-9 - IE和其他浏览器之间的表单文本字段格式问题

我们正在构建一个表单以紧密复制打印版本,该版本需要将输入文本字段精确放置在图形元素上的图层中以匹配打印表单。一切正常,直到客户要求文本正确对齐。测试表明,IE9-10 不会在最右边的字母右侧添加字母间距,而其他浏览器会这样做。不幸的是,这会导致输入字段内容排列在不同的位置。CSS 进行了调整以使数字在下面的框上对齐,但是,在 IE9-10(以及可能的早期版本)中,数字向右移动(没有间距)。去掉字母间距可以解决问题,但我们需要它来匹配框的位置。

http://siteground164.com/~contexed/design1/index.php/education/techmark/decision-form-2n

0 投票
1 回答
1623 浏览

html - 跨浏览器字母间距

我在跨浏览器字母间距方面遇到了一个大问题,这导致框/输入框在不同的浏览器中关闭,尤其是 safari 和 chrome。

如图所示,一个被揉成一团,而另一个看起来很正常。有没有人对此有任何修复?

字母间距示例

0 投票
1 回答
1164 浏览

css - 在Safari上使用自定义字体的字母间距Css?

我正在开发一个网站,但我刚刚意识到我的字体仅在 Safari 上呈现存在问题,我没有找到解决方案。

基本上我在我的网站上使用了两种自定义字体。一个字母间距为 0.05em 以尊重我的 psd 文件。

我的字体在 Chrome、Firefox、Internet Explorer 上呈现良好。但对于 Safari,奇怪的是,它不起作用,字母间距不呈现。我在某处读到它可能是 webkit 的问题,但如果是这种情况,为什么它会在 chrome 上工作?这真的让网站在 safari 上变得很糟糕,我需要找到一个修复程序。

我无法相信没有可能的解决方法。

如果您有任何想法,那将很高兴。

下面是我的代码。

Css 声明字体:

我的段落的CSS:

在 Chrome Firefox 和 Internet Explorer 上呈现

在此处输入图像描述

在 Safari 上渲染

在此处输入图像描述

显然字母间距不起作用..

如果您有任何想法,再次感谢。

0 投票
1 回答
574 浏览

webview - JavaFX Webview 字母间距错误?

目前我正在使用 JavaFx Webview 加载 HTML 页面。但是在加载 HTML 页面时出现了问题。它不读取 CSS 中的letter-spacingor-webkit-letter-spacing属性。Chrome浏览器没问题。我怎样才能让它在 JavaFx 中工作?

0 投票
1 回答
1720 浏览

css - CSS下划线和字母间距

在网站菜单中,我实现了客户关于 CSS 排版的一些愿望。她需要对字体进行不同的跟踪,没问题。但是,她希望在活动链接上加下划线。由于我还没有实现针对活动链接的代码,所以我只是将它们都加了下划线以查看它的外观。CSS如下:

这是结果:

带有样式链接的网站菜单

问题是字母间距会弄乱下划线。我已经手绘了一些投票磁铁圆圈来指示问题。这条线很好地从左侧开始,但letter-spacing向右延伸了值。

屏幕截图来自 Firefox 25。Jsfiddle 自己看看

我可以使用边框和使用边距而不是行高来解决这个问题,但是这可以解决吗?