【问题标题】:Force font family unless header tag强制字体系列,除非标题标签
【发布时间】:2017-11-21 20:19:34
【问题描述】:

TLDR:使用 CSS 有没有办法强制所有无标题标签使用特定字体?

所以我在一个学区工作,我们正在努力统一我们的网站外观。不过,我们有一个小问题,我们所有的老师都可以更改字体系列和内容的大小。我们真的不介意他们何时使用标题或当他们为了强调而将字体稍大一点时。我们发现的问题是他们选择了难以阅读的字体。

现在我知道在 css 中使用 !important* 将强制所有字体都使用此功能(是的,我知道我们真的不应该使用 !important)。但是,这不允许用户对标题使用自定义字体(h1、h2、h3、h4、h5 和 h6 标签)。有没有一种方法可以强制字体系列是特定的,而不是在标题标签上强制它。

教师受过培训,不会这样做,但如果他们这样做,就没有办法惩罚或责骂他们。所以训练它是不可能的。我也是一个维护这种东西的人,这只是我工作的一小部分,我们有 1000 多名教师,所以我很难执行。

所以现在您知道我的问题以及为什么会出现问题了。任何建议将不胜感激。

TLDR:使用 CSS 有没有办法强制所有无标题标签使用特定字体?

【问题讨论】:

    标签: html css


    【解决方案1】:

    你可以使用:not。这是一个小例子。您可以看到标题标签与段落标签是不同的字体系列(添加了一些颜色等)。

    h1, h2, h3, h4, h5, h6{
      font-family: sans-serif;
      color: red;
    }
    
    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
      font-family: Serif;
      color: blue;
    }
    <h1>Hello</h1>
    <h2>Hello</h2>
    <p>Hello</p>

    【讨论】:

    • 无论如何,这可能有效only in Safari
    • 似乎没有应用第一条规则。这意味着它不会强制字体成为特定字体。不过,谢谢您的时间。编辑:刚刚看到您关于查看的评论。
    • 我已经编辑了这篇文章,它不是很漂亮,但它似乎可以工作。 (但仍在努力)
    • 此时,我不在乎漂亮。如果成年人只是按照说明进行操作,我什至不需要这个。哈哈。不过它似乎确实有效。
    • 好的我又更新了,例子应该更清楚了。
    【解决方案2】:

    使用:not pseudoclass

    设置默认样式,然后为可编辑字体覆盖它...

    * {
      font-family: sans-serif;
      font-style: normal;
      color: #000;
    }
    
    *:not(h1):not(h2):not(h3) {
      font-family: 'courier';
      font-style: italic;
      color: red;
    }
    <h1>Default font</h1>
    <h2>Default font</h2>
    <p>Changed font</p>
    <h3>Default font</h3>

    【讨论】:

      猜你喜欢
      • 2011-01-25
      • 2012-11-16
      • 1970-01-01
      • 2021-11-05
      • 1970-01-01
      • 2011-10-24
      • 2018-01-22
      • 2022-10-23
      • 1970-01-01
      相关资源
      最近更新 更多