【问题标题】:Reduce the weight of a Glyphicon减轻 Glyphicon 的重量
【发布时间】:2017-07-29 21:25:38
【问题描述】:

有没有办法减轻 Glyphicons 的“重量”?

我正在使用“ok”Glyphicon <span class="glyphicon glyphicon-ok"></span>,其显示如下:

有什么方法可以在不减小字体大小的情况下减轻重量以产生更细的刻度?将font-weight 更改为lighter 没有任何效果。

【问题讨论】:

    标签: html css twitter-bootstrap fonts glyphicons


    【解决方案1】:

    如果您不想全局应用,也可以在 glyphicon 上使用不透明度。

    <span style="opacity:0.25;" class="glyphicon glyphicon-ok"></span>
    

    【讨论】:

      【解决方案2】:

      适用于不同背景色。

      $(document).ready(function() {
          $( "[.fas || .glyphicon]" ).each(function( index ) {
            var color = $(this).parent().css("background-color");
            $(this).css("-webkit-text-stroke","2px "+color)
          });
      });
      

      注意:选择.fas.glyphicon 之一。

      【讨论】:

      • 用纯 CSS 做这个不是更好吗?
      • 我们不能用纯 CSS 处理 html DOM。如果我们想让所有元素都使用不同的-webkit-text-stroke background-color 我们必须使用 jquery @德里克·布朗。
      【解决方案3】:

      您可以在::before 伪元素上应用font-weight 属性来更改字体粗细:

      .glyphicon {
        font-size: 60px;
      }
      
      .glyphicon-light::before {
        font-weight: 100;
      }
      
      .glyphicon-thick::before {
        font-weight: 900;
      }
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      
      
      <span class="glyphicon glyphicon-search glyphicon-light"></span>
      
      <span class="glyphicon glyphicon-search"></span>
      
      <span class="glyphicon glyphicon-search glyphicon-thick"></span>

      【讨论】:

        【解决方案4】:

        使用白色描边是一种方法

        -webkit-text-stroke: 2px white;
        

        【讨论】:

        猜你喜欢
        • 2021-06-30
        • 1970-01-01
        • 1970-01-01
        • 2012-07-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2010-10-03
        相关资源
        最近更新 更多