CSS设置font-family与text-align不生效：字体未变更、文本无法居中

问题原因及修复方案 #

1. Roboto字体不生效问题

你没有在页面中引入Roboto字体资源，浏览器找不到指定字体时会自动降级为系统默认字体。
你可以选择两种方式引入字体：

• 下载Roboto字体文件到本地，通过@font-face规则自定义引入
• 接入合规的在线字体资源，在页面头部加载对应的字体样式

2. 文本对齐异常问题

a标签内同时存在<img>行内块元素和文本节点，行内元素默认按照基线对齐，导致文字和图片位置错位；text-align: center仅能控制行内内容的水平对齐，无法处理垂直方向的对齐偏差。

修复后的代码示例 #

<style>
  /* 本地引入Roboto字体示例，替换为你自己的字体文件路径 */
  @font-face {
    font-family: 'Roboto';
    src: url('roboto-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  div#olark_tab{
    position: fixed;
    right: 0;
    bottom:50%;
    z-index:5000;
  }

  #olark_tab div{
    width: 150px;
    margin-right: -59px;
    transform: rotate(-90deg);
  }

  #olark_tab a{
    /*Edit these to change the look of your tab*/
    background-color: #DCDCDC;
    color: #1EAFE6;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    height: 32px; /* 匹配原有20px高度+6px上下padding的总高度 */
    padding: 0 6px; /* 左右保留padding，上下交给flex居中处理 */
    display: flex; /* 改用flex布局统一控制内部对齐 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    gap: 4px; /* 控制图片和文字的间距，可自行调整 */
    text-decoration: none;
    width: auto;
    border-top-right-radius:9px;
    border-top-left-radius:9px;
    border-top-style: none;
    border-top-width: 0;
  }
  /* 消除图片默认对齐偏移 */
  #olark_tab a img {
    vertical-align: middle;
  }

  #olark_tab a:hover{
    background-color: white;
  }
</style>
<div id="olark_tab">
  <div>
    <a href="javascript:void(0);" onclick="olark('api.box.expand')">
        <img src="icon-chat.svg" alt="chat icon">
        Chat
    </a>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user15269714