Open Sans 字体系列导致一些 UI 更改

Question

我只是在开发一个带有反应的按钮小部件，我使用 'Open Sans' 字体系列作为 html 正文。但是如果没有“Open Sans”字体，一些 UI 样式会崩溃，当将 font-family 设置为“Open Sans”时，它会按预期工作。无论字体系列如何，我都需要 CSS 样式是通用的。

请访问此链接https://imgur.com/a/xePLPCL 以查看它所做的 UI 更改。我制作了一个 gif 并托管。

JSX：

<div id="context-draggable" className={b()}>
    <button 
        onClick={() => getContextItems('center-btn',contextItems)}
        className={b('center-btn').toString()}>
            15
    </button>
    <FontIcon 
         onClick={() => getContextItems('top-left-btn',contextItems)}
         className={b('top-left-btn').toString()} 
         name='top-left' 
         size={32} 
     />
     <FontIcon 
         onClick={() => getContextItems('top-right-btn',contextItems)}
         name='top-right' 
         size={32} 
         className={b('top-right-btn').toString()} 
      />
      <FontIcon 
          onClick={() => getContextItems('bottom-left-btn',contextItems)}
          className={b('bottom-left-btn').toString()} 
          name='bottom-left' 
          size={32}  
      />
      <FontIcon 
          onClick={() => getContextItems('bottom-right-btn',contextItems)}
          name='bottom-right' 
          size={32} 
          className={b('bottom-right-btn').toString()} 
       />
       <FontIcon 
           className={b('bg-transparent').toString()} 
           name='bg-transparent' 
           size={32} 
       />
</div>

SCSS：

.context-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 70px;
    width: 70px;
    z-index: 99999;
    cursor: grab;

    &:active {
        cursor: grabbing;
    }

    &__center-btn {
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: none;
        height: 30px;
        width: 30px;
        text-align: center;
        background-color: #26231E;
        box-shadow: 0px 0px 5px #8c88884a;
        color: #A29993;
        cursor: pointer;
        outline: none;

        &:active {
            height: 25px;
            width: 25px;
            font-size: 12px;
        }
    }

    &__top-left-btn,
    &__bottom-left-btn {
        color: #ff4700 !important;
        cursor: pointer;
        position: absolute;
        z-index: 1;

        &:active {
            font-size: 24px !important;
        }
    }

    &__top-right-btn,
    &__bottom-right-btn {
        color: #ff4700 !important;
        cursor: pointer;
        position: absolute;
        z-index: 1;

        &:active {
            font-size: 24px !important;
        }
    }

    &__top-left-btn {
        top: -4px;
        left: 0;

        &:active {
            top: -1px;
            left: 5px;
        }
    }

    &__top-right-btn {
        top: -4px;
        right: 0;

        &:active {
            top: -1px;
            right: 5px;
        }
    }

    &__bottom-left-btn {
        bottom: -6px;
        left: 0;

        &:active {
            bottom: -3px;
            left: 6px;
        }
    }

    &__bottom-right-btn {
        bottom: -6px;
        right: 0;

        &:active {
            bottom: -3px;
            right: 6px;
        }
    }

    &__bg-transparent {
        color: #0a0a0a4d !important;
        font-size: 80px !important;
        position: absolute;
        top: -16px;
        right: -5px;
    }
}

上面的JSX和SCSS是widget组件的代码。

常用 CSS：

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/opensans-regular/OpenSans-Regular.eot');
    src: local('Open Sans'),
        local('Open Sans'),
        url('../fonts/opensans-regular/OpenSans-Regular.eot#iefix') format('embedded-opentype'),
        url('../fonts/opensans-regular/OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/opensans-regular/OpenSans-Regular.woff') format('woff'),
        url('../fonts/opensans-regular/OpenSans-Regular.ttf') format('truetype');
}

body {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
}

#app {
    height: 100vh;
    background: #26231E;
}

FontIcon 组件的 SCSS：

@font-face {
    font-family: 'icon_font';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/icomoon.eot');
    src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.svg#icomoon') format('svg'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype');
}

[class^="fontIcon__icon-"]:before,
[class*="fontIcon__icon-"]:before {

    font-family: 'icon_font';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-rendering: optimizeLegibility;
}

.fontIcon {
    color: #336699;
    font-size: 32px;

    &__icon {

        &-bottom-left:before {
            content: "\e900";
        }

        &-bottom-right:before {
            content: "\e901";
        }

        &-top-right:before {
            content: "\e902";
        }

        &-top-left:before {
            content: "\e903";
        }

        &-bg-transparent:before {
            content: "\e904";
        }
    }

    &--xnano {
        font-size: 9px;
    }

    &--nano {
        font-size: 10px;
    }

    &--micro {
        font-size: 12px;
    }

    &--mini {
        font-size: 16px;
    }

    &--small {
        font-size: 32px;
    }

    &--medium {
        font-size: 64px;
    }

    &--large {
        font-size: 128px;
    }

    &--xlarge {
        font-size: 256px;
    }

    &--xxlarge {
        font-size: 512px;
    }

    &--disabled {
        cursor: not-allowed;
        opacity: .3;
    }
}

我需要的解决方案：我希望这些图标不会改变其大小，而与正文标签字体系列无关

Answer 1

这很可能是因为无论您的默认字体系列是什么，都有不同的字体大小或字体粗细或行高。

尝试为以下内容制定规则：

https://www.w3schools.com/cssref/pr_font_font-size.asp
https://www.w3schools.com/cssref/pr_font_weight.asp
https://www.w3schools.com/cssref/pr_dim_line-height.asp

这将确保您有一些默认设置。为了以防万一，添加备用字体系列也是值得的。比如：

.class {
    font-family: 'Open Sans', Arial, Helvetica;
}

如果你仍然卡住，请告诉我。

编辑：删除了关于更新问题以包含代码的评论