新手求助：网站英雄横幅自定义字体显示异常及跨浏览器颜色问题

核心问题排查与修复方案 #

1. 修复文字定位（实现左侧垂直居中） #

原代码用硬编码偏移的方式定位，会导致不同屏幕尺寸下错位。正确做法是利用绝对定位结合垂直居中变换，确保文字始终在横幅左侧垂直居中。

2. 解决黑白字体显示异常与跨浏览器颜色不一致 #

原代码混合使用color: transparent、-webkit-text-stroke和-webkit-text-fill-color，导致颜色逻辑冲突，同时Opera GX的深色模式会自动反转颜色。直接设置纯白色并禁用浏览器颜色反转即可解决。

3. 优化自定义字体加载（避免字体未加载时的显示问题） #

在@font-face中添加font-display: swap，确保字体加载完成前用 fallback 字体占位，同时确认字体文件路径与本地文件位置匹配。

修改后的CSS代码

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

img{
    opacity: 50%;
}
.croppedbanner {
    width: 100%;
    height: 200px;
    object-position: 0% 39%; 
    object-fit: cover;
}

.container{
    position: relative; /* 保留相对定位作为绝对定位参考 */
    height: 200px; /* 与横幅高度一致，确保定位范围正确 */
}

div.hero-text{
    font-family: khFont, Arial, sans-serif; /* 添加fallback字体，避免加载失败 */
    letter-spacing: 5px;
    font-size: 55px;
    position: absolute;
    left: 10px; /* 保持左侧固定间距 */
    top: 50%; /* 垂直居中基准线 */
    transform: translateY(-50%); /* 向上偏移自身高度的50%，实现精准垂直居中 */
    font-weight: normal;
    line-height: 58px;
    color: white; /* 直接设置白色文字 */
    color-scheme: only light; /* 禁用浏览器深色模式下的颜色自动反转 */
}

@font-face {
    font-family: khFont;
    src: url(/fonts/khFont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 优化字体加载体验，避免文字闪烁 */
}

修改后的HTML代码（结构无需改动）

<div class="container">
    <img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
    <div class="hero-text">
        <h1> Welcome to the site </h1>
    </div>
</div>

关键修改说明 #

• 定位优化：给.container设置固定高度，.hero-text通过top:50% + transform: translateY(-50%)实现垂直居中，left:10px保留左侧间距，适配不同屏幕尺寸。
• 颜色修复：移除所有冲突的颜色属性，直接设置color:white，并添加color-scheme: only light强制浏览器不自动调整颜色，解决Opera GX深色模式下的颜色异常。
• 字体加载优化：font-display: swap确保字体加载过程中页面文字正常显示，fallback字体避免自定义字体加载失败时出现空白。

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