如何解决您好,我想在 Windows 和 Mac 中为 Web 应用程序中的同一页面实现不同的 css 字体任何人都可以向我提供我们如何实现这一目标
我的要求是根据操作系统应用字体
对于 Windows:“Segoe UI” 对于 Mac:“SF Pro”
我尝试使用下面的代码,但在 DOM 加载之前加载而不是持久化
if (navigator.appVersion.indexOf("Win")!=-1)
{
document.body.style.background = "green";
}
解决方法
您可以通过 JavaScript 在 navigator.userAgent
标签的 data-
属性中设置值 html
,并使用属性选择器从 CSS
设置所需操作系统中所需的字体,如下所示:
document.documentElement.setAttribute('data-useragent',navigator.userAgent);
html[data-useragent*='Mac OS X'] {
font-family: 'SF Pro',sans-serif;
}
html[data-useragent*='Win'] {
font-family: 'Segoe UI',sans-serif;
font-weight: 800;
}
<p>Lorem ipsum dolor sit,amet consectetur adipisicing elit. Placeat,corrupti! Dolore,repellat quo modi minus,aliquid mollitia amet suscipit ipsam quisquam esse,inventore quod tempore consequatur sint! Sapiente saepe quidem omnis,voluptatibus,cumque impedit maiores iste culpa asperiores accusamus assumenda temporibus minus adipisci porro odit ut reiciendis quia incidunt dolores!</p>
放入 useEffect with empty dependency list
useEffect(() => {
// ... your code here
if (navigator.appVersion.indexOf("Win")!=-1)
{
document.body.style.background = "green";
}
},[])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。