将自定义字体应用于引导导航栏项目答案

【问题标题】：Applying A Custom Font To Bootstrap NavBar Items将自定义字体应用于引导导航栏项目
【发布时间】：2021-07-07 10:13:25
【问题描述】：

目标：将自定义字体（在本例中为 VCR_OSD_MONO_1）应用到导航栏项目。

过去，CSS 和 Bootstrap 并不能很好地相互配合，就像 Bootstrap 讨厌我的 site.css 文件，但这里是我正在使用的导航栏：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3" style="background-color: #e3f2fd;">
            <img src="/images/APixelADayLogoTransparent.png" height="100" />
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Home" asp-action="About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Gallery" asp-action="Gallery">Gallery</a>
                    </li>
                    <li class="nav-item">
                        @if (User.IsInRole(IdentityHelper.Administrator))
                        {
                            <a class="nav-link text-dark" asp-controller="Commissions" asp-action="Commissions">Commissions Log</a>
                        }
                    </li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </nav>

这是我在 site.css 文件中制作的字体系列：

@font-face {
    font-family: "VCR";
    src:url(../fonts/vcr_osd_mono/VCR_OSD_MONO_1.001.ttf)
}

到目前为止我在 site.css 文件中尝试过的内容：

li {
    font-family: VCR;
}

a {
    font-family: VCR;
}

如何将字体应用到导航栏中的所有文本？

【问题讨论】：

标签： html css asp.net-core bootstrap-4 fonts

【解决方案1】：

事实证明，VS Code 保留了旧版本的页面。它正在应用字体，但它保存的是旧版本的页面。因此，我不得不通过禁用缓存手动强制页面再次下载所有内容。我是这样做的：

按 F12 打开开发者工具。
转到“网络”标签。
勾选“禁用缓存”按钮
在页面上进行硬重新加载（左键单击重新加载按钮，然后选择硬重新加载选项，或使用 ctrl + shift + r 快捷键。

这就是页面现在的样子:)：

【讨论】：