H5视频播放器，视频文字模糊

Question

如图所示：左边是网页中的h5播放器，右边是windows的本地视频播放器

网页中当窗口缩小 文字变得模糊，无法辨别
本地视频播放器窗口缩小的同样尺寸 文字依然可见

有什么办法改善网页中的显示

html代码：

<div class="video-mask" v-show="showVideo">
  <div class="video-content">
    <div class="close-btn" @click="closeVideo"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div>
        <video id="roleVideo" width="100%" height="auto" controls webkit-playsinline class="roleVideo">
      <source src="/imgs/portal/video/virtual-finance-company.mp4"></source>
      <p>设备不支持</p>
    </video>
  </div>
</div>

css代码：

.video-mask{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  top: 0;
  background: rgba(0, 0, 0, 0.7);

  .video-content{
    width: 50%;
    transform: translate(-50%, -50%);
    top: 45%;
    left: 50%;
    position: absolute;

    @include mediaQuery() {
      width: 100%;
    }

    .close-btn{
      position: absolute;
      right: 0;
      top: 0;
      color: #292c34;
      cursor: pointer;
      z-index: 2;

      &:hover{
        color: #2c80fe;
      }

      svg{
        fill: currentColor;
      }
    }

    .roleVideo{
      object-fit: fill;
    }
  }
}

另外一个视频字体比较粗，缩小依然能看清文字，另外设计师说两个视频引用的字体也不一样，正常的是微软雅黑

Answer 1

换点阵字体，点阵字体看着比较清晰

Answer 2

麻烦贴下你html 的代码和css

Answer 3

估计是视频分辨率太大，视频被等比例缩小