如何更改bootstrap的字体样式?

发布于 2022-09-03 23:56:30 字数 1379 浏览 9 评论 0

如何将bootstrap的默认字体改为微软雅黑?

segmentfault,有这样的问题,我一开始和题主一样在,网上搜索得到了下面的方法,通过CSS修改字体,但是一点效果都没有

我在网上找到了如下的解决办法 :http://www.imooc.com/wenda/de... 或者
http://www.igooda.cn/jzjl/201...

然后使用该问题下,*被采纳的方法

1.将雅黑字体的格式转成eot,woff,ttf,svg四种格式,工具使用http://www.fonts2u.com,将这四个字体保存到你的fonts文件夹里面
2.使用@font-face,格式

@font-face {
    font-family: "DIY-FontName";
    src:url('../fonts/quicksand-book.eot');
    src:url('../fonts/quicksand-book.eot?#iefix') format('embedded-opentype'),
    url('../fonts/quicksand-book.woff') format('woff'),
    url('../fonts/quicksand-book.ttf') format('truetype'),
    url('../fonts/quicksand-book.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

将里面的url部分改成你1上面保存的字体的路径;
1在你的css中css body { font-family: "DIY-FontName"; }即可。

根据上面的代码操作之后
结果 在safari、firefox上面是有效果的,一直用来测试的chrome、opera没有效果

下面有说用less的,我只使用了bootstrap的CSS和JS文件,不知道应该怎么做。
请问有什么好的解决办法呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

吖咩 2022-09-10 23:56:30

这个和bootstrap没有关系,上面的方法是对的... 需要注意的是,如果是指定了一个系列的字体,但是系统(或浏览器)中不存在你指定的字体,默认是会选择后面的字体的...

哆啦不做梦 2022-09-10 23:56:30

http://getbootstrap.com/custo...

找到 Typography 部分,对应修改,底部编译生成。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文