我将 react 与 nextjs 一起用于 SSR 和 boostrap。我有一个通过 cdn 加载 Bootstrap 的组件:
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" />
</Head>
现在在我的导航栏中，我通过样式 jsx 使用字体 Montserrat，这是 nextjs 中更改 css 的方式:
import Link from "next/link";
class Navbar extends React.Component {
render() {
return (
<div>
<nav
className="navbar navbar-light navbar-expand-lg fixed-top bg-secondary text-uppercase"
id="mainNav"
>
<Link href="/">
<a className="navbar-brand js-scroll-trigger ">Navbar</a>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item mx-0 mx-lg-1">
<Link href="/about">
<a className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger">
Blog
</a>
</Link>
</li>
<li className="nav-item mx-0 mx-lg-1">
<a
className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#"
>
More
</a>
</li>
<li className="nav-item mx-0 mx-lg-1">
<a
className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#"
>
About
</a>
</li>
</ul>
</div>
</nav>
<style jsx>{`
@media (min-width: 992px) {
#mainNav {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
transition: padding-top 0.3s, padding-bottom 0.3s;
}
}
.navbar-light .navbar-brand {
color: white;
font-weight: bold;
font-family: Montserrat;
font-size: 130%;
}
.navbar-light .navbar-nav .nav-link {
color: white;
font-family: Montserrat;
font-size: 90%;
font-weight: bold;
}
.bg-secondary {
background-color: #2c3e50 !important;
}
`}</style>
</div>
);
}
}
export default Navbar;
我使用 docker 将容器中的整个元素放在 mac 上，这样我就可以在操作系统之间毫无问题地切换，因为我使用 macbook pro 作为可移植工作站，而我的桌面 Windows pc 作为我的家庭工作站。
现在一切顺利，唯一的区别是字体并没有像在 Mac 上那样真正显示出来。我在 Stackoverflow 上检查了这个问题，有人写道，如果 chrome 没有从谷歌字体中找到字体，它会将 Times new Roman 作为默认字体，就像我看到的那样。现在我真的不明白为什么会发生这种情况，因为我加载了 Bootstrap ，我应该像在 Mac 上一样在此处提供所有字体。也许你可以帮助我并告诉我我应该改变什么以及为什么会这样。
非常感谢你们!
最佳答案
Montserrat 没有安装在我的 Windows 机器上，我需要在元素中导入字体系列。我以为我用 nextjs 做对了……显然不是。但是，它现在可以在本地使用。
关于css - 在 Mac 上工作并在 Windows 上显示为 times new roman 在开发模式下的字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58364579/