天道酬勤,学无止境

Bootstrap CSS without Google Fonts

I am writing a simple offline web app to configure a device (think similar to a wireless router setup page).

The computer that is connected to my device won't have an internet connection, it will be loading the page from a server running on my device.

I've built the page using a Bootswatch override of Bootstrap.css because that is a library I'm familiar with. However, my page load hangs because the browser tries to retrieve Google Fonts but obviously can't.

Is there a version of Bootstrap.css which does not use Google Fonts, or is there a way that I can override them?

评论

Can't you simply remove the first line from the custom bootswatch theme you downloaded (assuming you downloaded the css file, like this one http://bootswatch.com/flatly/bootstrap.css)?

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

This should make it fall back to a font that it can use.

Why don't you just download the font you wish to use i.e. OpenSans, place it in a sub folder named "fonts" or something like that then use something like this...

@font-face {
  font-family: "OpenSans";
  src: url("/fonts/Opensans.ttf");
}

If you don't want to edit your bootstrap css for any reason(for me it was injected from jar file by wro4j) then you can override the 'font-family' in your own css with your desired one and then include that css file in your web application with higher priority.

@font-face {
font-family: "myFont";
src: url("/fonts/myFont.ttf");
}

body {
  font-family: myfont !important;
}

PA: if you are using wro4j, then your new css must be upper than the bootstrap webjar. This is a sample wro.xml:

<group name="main">
  <css>/styles/my.css</css>
  <css>classpath:META-INF/resources/webjars/bootswatch-spacelab/3.3.1+2/css/bootstrap.min.css</css>
</group>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何使用Google的字体更改Bootstrap默认字体系列?(How can I change the Bootstrap default font family using font from Google?)
    问题 我正在创建一个博客站点,并且想要更改Bootstrap字体。 在我的导入CSS标头中,我添加了此字体 <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 如何将其用作引导程序默认字体? 回答1 首先,您不能以这种方式将字体导入CSS。 您可以在HTML头中添加以下代码: <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 或将其导入CSS文件中,如下所示: @import url("http://fonts.googleapis.com/css?family=Oswald:400,300,700"); 然后,在CSS中,您可以编辑主体的字体系列: body { font-family: 'Oswald', sans-serif !important; } 回答2 如果使用Sass,则会使用!default定义Bootstrap变量,您将在其中找到字体系列。 您可以在包括Bootstrap Sass文件之前在自己的.scss文件中设置变量,并且
  • 在Twitter Bootstrap中使用其他字体(Using a different font with twitter bootstrap)
    问题 我想为我的网站使用其他字体,这不是常规的webfont。 我已经创建了EOT文件。 现在如何将这些字体与twitter bootstrap集成在一起? 有人可以帮忙吗? 谢谢 回答1 我见过的最简单的方法是使用Google字体。 转到Google字体并选择一种字体,然后Google会为您提供一个链接以放入您的HTML中。 然后将其添加到您的custom.css中: h1, h2, h3, h4, h5, h6 { font-family: 'Your Font' !important; } p, div { font-family: 'Your Font' !important; } 或者 body { font-family: 'Your Font' !important; } 回答2 您可以在官方网站上找到定制程序,该定制程序允许您将一些LESS变量设置为@font-family-base 。 在布局中链接自定义字体,并使用自定义生成的引导程序样式。 连结这里 对于使用@font-face规则的示例,该示例使用WOFF格式(这对浏览器兼容性非常好),请在您的app.css文件中添加此CSS,并包含您的自定义boostrap.css文件。 @font-face { font-family: 'Proxima Nova'; font-style: normal; font
  • 在 yeoman/angular grunt build 中未更新对字体(font-awesome)资源的引用(References to font (font-awesome) resources are not updated in yeoman/angular grunt build)
    问题 我知道关于这个的 SO 线程(我已经在下面链接了它们),但不幸的是我无法与他们解决这个问题,所以请允许我提出这个问题:-) 我已经使用 Yeoman 引导了一个 AngularJS 项目,因此依赖于使用 bower.js 和 SCSS 的 grunt.js 构建。 我想使用来自 bootstrap-sass-official 的 font-awesome 和 glyphicons-halflings-regular。 运行“grunt serve”时一切正常,但是当我想创建一个用于分发的文件集时,对字体文件的引用没有按应有的方式更新。 main.scss 包含 $icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/"; @import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap'; $fa-font-path: "../bower_components/font-awesome/fonts/"; @import "font-awesome/scss/font-awesome"; 但是 dist/styles/123456.main.css 中的结果是像这样的引用
  • WordPress enqueue scripts and styles
    I using an open source WordPress theme and want to remove the styles and scripts from header.php file and write them properly. I've added the following code to my functions.php file and nothing happens. function smarter_scripts() { wp_enqueue_style( 'smarter-bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' ); wp_enqueue_style( 'smarter-font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css' ); wp_enqueue_style( 'smarter-google-fonts-open-sans', '//fonts.googleapis.com/css?family=Open+Sans:600,400,300,700' ); wp_enqueue_style(
  • 流星包css相对资源路径(Meteor package css relative resource path)
    问题 如何从同一包中的CSS文件引用Meteor包中的图像文件,以便在捆绑后可以访问该图像。 回答1 使用包相对路径引用您的图像,即: /packages/my-package/css/my_css.css: .my-class{ background-image:url('/packages/my-package/img/my_image.png'); } 明确要求Meteor通过软件包系统API将其捆绑在客户端上: /packages/my-package/package.js: Package.on_use(function(api){ var clientFiles=[ // css "css/my_css.css", // img "img/my_image.png" ]; api.add_files(clientFiles,"client"); }); 这样,您的程序包将真正通用:用户只需“添加mrt”即可自动将映像提供给客户端,而不会与/ public混淆,后者专用于应用程序特定的静态文件。 例如,考虑一个bootstrap3-glyphicons包: 套餐/ -> bootstrap3-glyphicons / ----> bootstrap-glyphicons / (来自Twitter Bootstrap的第三方文件) -------> css / ------
  • 使用 grunt 构建的 Angular 应用程序中缺少资产(Assets missing in Angular application built using grunt)
    问题 我已经使用 Yeoman 和 AngularJS(以及所有与之相关的东西,如 Grunt 和 Bower)构建了一个应用程序。 使用grunt serve在本地运行时,这一切都完美无缺。 但是,在运行 grunt 并部署应用程序之后,缺少一些资产,我不确定解决它的最佳方法是什么。 首先,运行 Grunt 似乎将图像复制到 dist 但它重命名它们而不调整 CSS 中的引用。 app/images/uparrow.png变成dist/images/3f84644a.uparrow.png 。 这是 main.scss 中的一行: .table.sortable th.sorted-asc { background-image: url(../images/uparrow.png); } 在构建过程中将其编译为 CSS 时,它不会重写路径,因此浏览器会尝试加载缺失的dist/images/uparrow.png 。 其次,加载 Bootstrap 插件的字体存在问题。 app/bower_components/bootstrap/dist/css/bootstrap.css引用了../fonts/glyphicons-halflings-regular.woff 。 相对路径解析为app/bower_components/bootstrap/dist/fonts
  • 资产:安装和资产:转储后Fontawesome字体失败(Fontawesome fonts fail after assets:install and assetic:dump)
    问题 我正在尝试建立一个我正在共享主机上工作的网站,并且一切正常,但是FontAwesome图标因为Symfony找不到它们应该放置的位置。 我按照以下步骤将网站移至生产共享主机: 由于SH不允许符号链接,因此将资产发布为硬拷贝,因此我运行以下命令assets:install 通过运行以下命令来发布Assetic处理的资产: assetic:dump (dev)和assetic:dump --env=prod (prod) 但这是行不通的,因为我一直在Firebug遇到此错误: "NetworkError: 404 Not Found - http://tanane.com/bundles/backend/img/mybg.png" "NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.woff?v=4.1.0" "NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.ttf?v=4.1.0" 在本地主机,按照相同的步骤,一切正常,因此我不知道是权限问题还是其他问题。 这就是我在base.html.twig定义资产的方式: {%
  • Bootstrap 图标未显示在已发布的 ASP.NET MVC 应用程序中(Bootstrap Icons not showing in published ASP.NET MVC application)
    问题 --- 注意:转到 EDITED 2 部分的摘要 ---- 我有一个 ASP.NT MVC (4) 应用程序。 我将 (twitter) Bootstrap 集成到它。 Bootstrap 运行良好,但在我发布应用程序时图标无法正确显示。 我试图重新发布应用程序但没有成功。 为了澄清起见,我在下面放了一些图片。 当我从 VS2013 运行我的应用程序时,结果是这样的(没关系): 在展位,IE 和 Chrome。 但是当我运行已发布的应用程序时,结果是这样的(这不正常): 铬合金 浏览器 (10) 不知何故,这个问题与评估的 CSS 有关,但我不知道这可能发生在哪一点。 本地应用程序中评估的 css 是这样的(可以): 铬合金 IE 但是在已发布的应用程序中,我有这个(这不行): 铬合金: IE: 有人经历过这种行为吗? 我能做些什么来解决这个奇怪的问题? --------------------------- 编辑 -------------- -------- 我在发布我的应用程序时获得了要包含的字体文件( .eot 、 .svg 、 .ttf和.woff )。 当我访问默认页面(应用程序根http://localhost/ )时,这是显示图标的页面,Chrome 的开发人员工具网络选项卡中显示的文件是: 在包含这些文件之前,我收到了文件的 404 错误
  • 从CakePHP 3中的供应商处加载javascript文件(Loading javascript files from the vendors in CakePHP 3)
    问题 我的问题是如何从CakePHP 3.0中的vendors文件夹中加载.js文件。 我已经通过作曲家加入了Twitter Bootstrap。 .js文件位于/ vendor / twbs / bootstrap-sass / assets / javascripts /文件夹中。 我不想将其移至webroot,因为那样我会破坏作曲家提供的自动更新功能。 有什么好的建议吗? 我不想复制文件并失去作曲家的利益... 回答1 我找到了解决方案! 如果我使用的是作曲家,为什么不也使用它,对不对? :) 在composer.json中: "scripts": { "post-install-cmd": "App\\Console\\Installer::postInstall", "post-update-cmd": "App\\Console\\Installer::postUpdate" } 在src / Console / Installer.php中: public static function postUpdate(Event $event) { $io = $event->getIO(); $rootDir = dirname(dirname(__DIR__)); static::copyTwitterBootstrapFiles($rootDir, $io); }
  • Assets missing in Angular application built using grunt
    I have built an application using Yeoman and AngularJS (and all the stuff that goes along with it like Grunt and Bower). It all works perfectly when running locally using grunt serve. However, after running grunt and deploying the application, there are a couple of missing assets and I'm not sure what the best way to solve it is. Firstly, running Grunt seems to copy the images across to dist but it renames them without adjusting the references in the CSS. app/images/uparrow.png becomes dist/images/3f84644a.uparrow.png. Here is a line from the main.scss: .table.sortable th.sorted-asc {
  • Google font not working with bootstrap
    I'm trying to use Google Font on a page. In my html I used: <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> And in my CSS: @import url('http://fonts.googleapis.com/css?family=Open+Sans'); Still whenI use "Open Sans" with the font-family attribute it stays on Arial. body { background-color: #F1F1F2; font-family: "Open Sans", Arial; }
  • Bootstrap Icons not showing in published ASP.NET MVC application
    --- NB: Go to the EDITED 2 section for summary ---- I have an ASP.NT MVC (4) application. I integrated (twitter)Bootstrap to it. Bootstrap is working perfectly, but the icons does not show correctly when I publish the application. I tried to republish the application without success. For clarify I put some images here below. When I run my application from VS2013 the result is this (which is OK): In booth, IE and Chrome. But when I run the published application the result is this (which is NOT ok): Chrome IE (10) This problem has, somehow, to be with the evaluated CSS but I don't know at which
  • 找不到资源错误以及资源插件如何处理(Resource not found Error and what about resources plugin)
    问题 我用grails快一年了。 从现在开始,当我想在gsp中链接CSS或js文件时。 我做了以下事情: 我在web-app文件夹下创建了一个新文件(例如资源文件),并将所有文件夹文件放置在其中(例如,在导入引导程序时,我在资源下有一个父文件夹引导程序,而在引导程序下有css,img和js文件夹,他们的文件)。 然后,要导入一个css文件,我做了以下工作(这里是有关此文件的文档): 这很好用,但是当我尝试在grails 2.2.4中创建一个新项目时,我遇到了Resource not found错误(浏览器为404,控制台为以下)。 ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css ERROR resource.ResourceMeta - Resource not found:
  • 使用grunt构建项目时Fontawesome无法正常工作(Fontawesome is not working when project is built with grunt)
    问题 我正在使用很棒的字体库字体。 当项目没有用grunt构建/丑化时,它可以工作。 但是,当我用粗鲁的方式构建项目时,它就无法正常工作。 我在控制台中收到此错误:... / fonts / fontawesome-webfont.woff?v = 4.0.3 404(未找到) 我已经将这个项目与约曼搭在一起。 这是我在index.html中的引用 <!-- build:css styles/fontawesome.css --> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <!-- endbuild --> 有什么想法可能是错误的吗? 更新我需要将文件夹/ bower_components / font-awesome / fonts复制到dist / fonts。 这需要在grunt文件中完成。 可能在“复制”选项下 copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= yeoman.app %>', dest: '<%= yeoman.dist %>', src: [ '*.{ico,png,txt}', '.htaccess', 'bower_components/**/*',
  • 为什么font-awesome可以在localhost上运行而不能在Web上运行?(Why font-awesome works on localhost but not on web ?)
    问题 我在我的项目(mvc/asp.net)使用了很棒的字体。 我的问题是,我在调试项目并检查localhost ,字体真棒图标没有问题。 但是,当发布该网站并在网上检查时,我看到的是小盒子,而不是图标。 我确定它放在正确的目录中(放置css文件的位置)。 我找不到任何适当的解决方案。 顺便说一下,按钮也没有问题。 它们都还可以,但是图标不见了。 谢谢 回答1 我刚刚加载了您的网页,并检查了萤火虫的网络标签。 您的以下网址返回了404: http://www.senocakonline.com/Content/font/fontawesome-webfont.woff http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf 我认为那些丢失是您的图标未显示的原因。 更新:23.10.2015使其可用,只需将此代码添加到您的WebConfig中: <system.webServer> <staticContent> <mimeMap fileExtension="woff" mimeType="application/font-woff" /> <mimeMap fileExtension="woff2" mimeType="application/font-woff" /> </staticContent>
  • Bootstrap 3 Glyphicons CDN(Bootstrap 3 Glyphicons CDN)
    问题 请注意! 此合并请求合并后,Bootstrap图标又回来了。 在过去的几周中反复进行此操作之后,我决定将Glyphicons图标字体恢复为主仓库。 考虑到UI中普遍使用的图标,对于大多数人来说,不将它们(或其他一些图标字体)与CSS和JS包含在同一位置可能是不利的。 此更新附带以下内容: 恢复文档(在“组件”页面上) 新变量@icon-font-path和@icon-font-name ,可灵活添加和删除图标字体升级到最新的Glyphicons(添加40个新图标) 从CSS页面中删除旧的Glyphicons提及将来,我们将致力于改进图标字体的自定义设置,以便更轻松地交换字体库(这是原始删除字体的全部动机)。 新版Twitter Bootstrap Glyphicons的CDN网址是哪个? 他们从Bootstrap 3中移到了一个单独的存储库中,但是我没有找到任何CDN。 从官方文档中: 随着Bootstrap 3的发布,图标已被移至单独的存储库。 这样可以使主要项目保持精简,使人们更容易交换图标库,并使Glyphicons图标字体更易于在Bootstrap外使用。 在官方网站上,他们没有提供图标的CDN网址。 在哪里可以找到它? 我不想下载存储库并将其包含到我的项目中。 回答1 随着Bootstrap 3的最新发行版以及glyphicons被合并回Bootstrap主仓库中
  • Single versus double quotation marks in HTML & CSS [duplicate]
    This question already has answers here: Single vs Double quotes (' vs ") (15 answers) Closed 5 years ago. Could anyone clarify the difference between single and double quotation marks in HTML5 & CSS. Here's Google's contradictory use of single quotes in HTML: <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> And CSS: font-family: 'Roboto', sans-serif; While Bootstrap's documentation practices demonstrate the use of double quoted marks in HTML: <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> And CSS
  • fonts are blocked in web client cors
    While I was working in local everything worked perfectly, now I uploaded to a hosting and the fonts are being blocked by something I've never heard of (CORS). The fonts (and css, js, etc) are in a subdomain because urls are parsed by the index (so paths are not working in the domain). The css/js are working ok. This is the output in the web console (firefox): Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font
  • Bootstrap 3 Glyphicons无法正常工作(Bootstrap 3 Glyphicons are not working)
    问题 我下载了bootstrap 3.0,但无法使用字形图标。 我收到某种“ E003”错误。 任何想法为什么会这样? 我在本地和在线都尝试过,但仍然遇到相同的问题。 回答1 我遇到了同样的问题,除了此页面上的隐藏评论之外,找不到任何有关它的信息。 根据Chrome的显示,我的字体文件可以很好地加载,但是图标显示不正确。 我正在回答这个问题,因此有望对其他人有所帮助。 我从Bootstrap 3的定制工具下载的字体文件出了问题。 要获取正确的字体,请转到Bootstrap主页并下载完整的.zip文件。 从那里提取四个字体文件到您的fonts目录,一切应该正常。 回答2 读者注意:关于自定义程序中的错误,请务必阅读@ user2261073的注释和@Jeff的答案。 这很可能是您造成问题的原因。 字体文件未正确加载。 检查文件是否在预期位置。 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons
  • 如何在引导程序3中包含glyphicons [重复](how to include glyphicons in bootstrap 3 [duplicate])
    问题 这个问题已经在这里有了答案: 如何在Bootstrap 3.0中使用字形符(9个答案) 7年前关闭。 我以前没有使用过任何引导框架。 我想在页面的bootstrap 3中包含一些glyphicons。 据我了解,它们应该包含在我添加到页面的bootstrap.css文件中。 当我查看bootstrap.css文件时,没有看到对它们的引用? 尽管文件很大,但我可能还是错过了一些东西。 我注意到,当我打开从引导程序3下载的dist文件夹时,有一个单独的文件夹fonts ,其中包含名为: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 似乎这是字形符号所在的位置,但是我不知道如何将它们附加到我的网站上? 如何将字形图标附加到页面上? 感谢您的任何帮助 下面的代码显示了附加的bootstrap.css文件: <!DOCTYPE html> <html> <head> <title>Bootstrap example</title> <meta name="viewport" content="width=divice-width, initial-scale=1.0">