【问题标题】:Why is my small-caps font-variant CSS class being disregarded?为什么我的小型大写字体变体 CSS 类被忽略?
【发布时间】:2013-11-13 10:52:38
【问题描述】:

我添加了这个 CSS 类:

.beanies {
    font-variant: small-caps;
}

我从几个地方调用它,再加上另一个类,都这样尝试:

<p class="coolPools beanies">LICENSE #764014</p>

...还有这个:

<h3 class="statelyPresence, beanies">NEW POOL LAW REQUIRES IMMEDIATE ACTION AT ALL APARTMENT AND CONDOMINIUM POOLS AND SPAS</h3>

(IOW,我应用于元素的两个类之间有或没有逗号分隔)

...在这两种情况下,文本都不会以小型大写字母显示。

我做错了什么?

【问题讨论】:

    标签: html css smallcaps


    【解决方案1】:

    小写字母意味着小写字母被转换为大写字母的稍小的变体。大写字母保持不变。由于您只有大写字母,因此您看不到任何区别。

    试试:

    <h3 class="statelyPresence beanies">New pool law requires immediate action at all apartment and condominium pools and spas</h3>
    

    演示:http://jsfiddle.net/Mn48Q/

    一般而言,目标是您“正常”编写 HTML 并使用 CSS 应用文本样式,包括在必要时将所有单词大写。

    (旁注:课程列表中没有逗号。)

    【讨论】:

      【解决方案2】:

      它正在工作,你没有错。但它是不可见的,因为你的字母都是大写的。

      这样写:

      .beanies {
          font-variant: small-caps;
          text-transform: lowercase;
      }
      .beanies:first-letter {
          text-transform: uppercase;
      }
      

      Fiddle here.

      【讨论】:

      【解决方案3】:

      通过排版定义,当文本为“small caps”时,其小写字母显示为可爱的大写小版本。您的示例中没有任何小写字母,因此这些字符的显示方式都与您输入的方式不同。如果你使用all small caps,大写字母也会变得可爱和小。

      试试这个 (demo):

      .beanies {
          font-variant: all-small-caps;
      }
      

      Mozilla 在其MDN Docs 中通过交互式演示描述并展示了差异。

      警告: Safari 或 Internet Explorer 中的 may not work

      【讨论】:

      • 太棒了,谢谢!也适用于 iOS Safari。
      猜你喜欢
      • 1970-01-01
      • 2012-06-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-06
      • 1970-01-01
      • 2012-03-04
      相关资源
      最近更新 更多