【问题标题】:What is the use of letter-spacing in vertical layout html垂直布局html中字母间距的用途是什么
【发布时间】:2017-12-19 13:12:26
【问题描述】:

我正在尝试理解日本的垂直 html。 在我的分析中,我发现在很多地方内容都有letter-spacing : <Negative value>。 我很少在横向内容中使用这种 css 样式,但在 JP 中它主要用于数字。

span.tcy {
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
    text-combine: horizontal;
    font-size: 0.9em;
    line-height: 0.9em;
    text-indent: 0;
    letter-spacing: -1px;
}

.tcy {
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
    text-combine: horizontal;
    font-size: 0.9em;
    line-height: 0.9em;
    text-indent: 0em;
    letter-spacing: -1px;
}

谁能解释一下字母间距 css 样式的实际用例,以及为什么它主要用于日文垂直内容来格式化数字。 谢谢。

【问题讨论】:

    标签: html css letter-spacing vertical-text


    【解决方案1】:

    当您在 letter-spacing 属性上使用负值时,它只会收紧字母。

    所有字体的字母之间没有相同的空格,这就是为什么你可能需要这个技巧来完成这项工作,主要是为了设计目的。

    对于日文垂直内容,我认为您必须使用 letter-spacing 属性和 line-height 才能拥有“完美”的内容。

    我将此链接提供给您,这可能会对您有所帮助。不要犹豫,用 sn-p 编辑您的帖子,然后我可以更准确地回答您。

    https://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284

    【讨论】:

    • 我正在使用写作模式来创建垂直内容,而不是通过任何 hack。以上内容对我有用。我的问题是,如果我在垂直文本中有水平数字,那么我注意到数字永远不会越过行的边界,那么给出负字母间距的目的是什么。当我在垂直文本中有 5 位数字时,数字会自动缩小它们以适应线宽。同样的事情也适用于文本。
    猜你喜欢
    • 2011-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-28
    • 2012-12-13
    • 2015-01-14
    相关资源
    最近更新 更多