“拒绝加载字体'/zb_system/image/icon/zblog.ttf?...请注意,未显式设置“font src”,因此使用“默认src”作为回退。”...最初我也以为是服务器设置问题导致不能加载字体文件,于是乎我在NGINX服务加上了字体的格式,如图: 因为我很清醒的记着在win服务器里面,需要在IIS服务器上添加MIME类型,但是Linux我记得不需要...,所以这个操作没有意义,设置完成后重载、重启Nginx服务器都是无效的,后来还特意百度了下http网站是否可以加载https资源,得到的答案是肯定滴,但是https不能加载http资源,这点好理解,但是后台为什么一直提示错误呢...呼呼原来如此,安全增强不仅仅是网站安全性还包括了https方面的,具体关闭方法如下: 后台,网站设置-全局设置-安全增强(灰色关闭) 如图关闭之后刷新页面,清空缓存编译,再加上强制更新(Ctrl+F5)图标显示正常
src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式 srouce :字体的加载路径,可以是绝对或相对URL。...font-weight 和 font-style 和之前使用的是一致的。 src属性后还有一个 local(font name) 字段,表示从用户系统中加载字体,失败后才加载webfont。... 到Google Web Fonts和Dafont.com下载.ttf格式字体,然后通过Font Squirrel来生成.woff等格式的字体。 ...七、自定义Font Icon 由于使用既定的Web字体库需要将整个字体库都下载下来,而实际上用到的Font Icon则只有数个而已,因此通过自定义Font...另外还有fontforge工具来自定义Web字体,具体请见@张鑫旭的《fontforge制作自定义字体及在手机上应用举例》 若要对已有的字体进行修改而不仅仅是提取的话可以是用IcoMoon,具体还是参考
CSS3有一个@font-face属性(不过据说 font-face 是CSS2 的产物),@font-face 的本意是用来在线加载自定义字体的(适合于英文字体),但后来这个 @font-face 被发扬光大...,折腾出了个 Web-font ——就是将某些矢量图标做成字体文件,然后通过@font-face 这个在网页中使用。...,本站 DeveWork.com 的主题暂时还不考虑使用。...Fontell 高级使用技巧:在选择所需的图标,下载前可以点击Customize Names 来自定义选择器名称,这样就可以充分满足个性化需求。...利:矢量图标,可以完美支持 放大、改变颜色 等 CSS 层面的修饰而无失真 弊:不兼容某些浏览器(IE)、同比图片式图标,加载的文件容量(字体文件、CSS文件)更大;如果考虑hack,加载更多的CSS
于是,在 Jekyll 博客主题设计的时候,通常会在个人简介的地方放置几个社交小图标,点击社交小图标即可把读者带到你的社交个人主页上。...这会导致虽然只发出了一个文件 HTTP 加载请求,但是由于文件体积过大、加载速度慢,而给用户带来不好的使用体验。 字体图标 接着发展出了一种字体图标的东西来解决图片索引中存在的问题。...而且,我们操纵字体图标的大小是采用 font-size 的方式而非 width/height 的方式。这样一来,字体图标和行内文字段落一起使用时也是非常匹配的,行距等文字样式都能同等适用。 ...SVG 图标还支持多种颜色、可以通过字体样式调整样式,并且支持 IE9 以上版本的浏览器。... 现在让我们来尝试一下借助 Iconfont 来创建自定义的社交图标集合吧。
字体样式修改 谷歌在线字体 本地自定义字体 字体样式的修改需要先引入相应的字体文件,此处推荐使用: 谷歌字体库 https://fonts.google.com/ 打开谷歌字体库, 输入预览字样,...使用自定义字体的文本会先被隐藏,直到字体加载结束才会显示。 swap:后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。...fallback:需要使用自定义字体渲染的文本会在较短的时间(100ms according to Google )不可见,如果自定义字体还没有加载结束,那么就先加载无样式的文本。...一旦自定义字体加载结束,那么文本就会被正确赋予样式。 optional:效果和fallback几乎一样,都是先在极短的时间内文本不可见,然后再加载无样式的文本。...cur图标的路径引用方式和背景图片的引用方式是一样的,都支持图床外链和本地相对链接。以下是一些常用位置的更改示例。读者还可以自己定义更多块元素的具体图标。
自定义字体,字体性能等 字体渲染背后不得不说的故事 字体渲染 自定义字体@font-face详解 移动端字体 图标自定浅谈 google fonts icomoon 图片 总得来说,图片的使用分为background...和img,而从优化方向来说分为减少请求和减少大小。...sprites)与压缩(有损压缩和无损压缩) 资源链接: 图片延迟加载的实现 CSS Gradients css sprites 图片优化 - 谷歌图片优化手册 baseline vs progressive...图片原理与优化 WebP 探寻之路 Web性能优化:图片优化 svg 目前svg最大的用途在图标及动画,最大的优点在于矢量图,可以任意缩放不失真,而且大小还比较小。...Device Width media queries resource 案例参考 如果需要ie8-也支持相应式,得引入js库兼容,如respond.js(不建议ie8去做响应式) 重排与重绘 网页性能管理详解
节省了带宽(相比图片)字体文件大小也不大(一般几百k)。 在线字体本身是矢量的,放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....TureTpe(.ttf)格式: .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,...Font Awesome 提供了高可用性的矢量图标字体。它可以用强大的CSS自定义图标的大小、颜色、图标阴影等。...自定义字体在线工具 有很多可以直接在线编辑和上传自定义字体的工具和网站。其中:icomoon就是比较常用的一个在线制作字体的网站。有很多免费的字体可以用,而且可以在线编辑和上传。 ?...字体下载下来后,可以直接用它提供的字体文件和样式类型文件。 其他: 定制自已的字体图标库 http://iconfont.cn/
节省了带宽(相比图片)字体文件大小也不大(一般几百k)。 在线字体本身是矢量的,放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....TureTpe(.ttf)格式: .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3...下载地址:下载 解压后,把字体包fonts文件加载拷贝到项目的根目录下。...Font Awesome 提供了高可用性的矢量图标字体。它可以用强大的CSS自定义图标的大小、颜色、图标阴影等。...自定义字体在线工具 有很多可以直接在线编辑和上传自定义字体的工具和网站。其中:icomoon就是比较常用的一个在线制作字体的网站。有很多免费的字体可以用,而且可以在线编辑和上传。
、bootstrap.min.js这两个文件放入HTML网页的最底部,这么做是为了防止网页未加载完毕而这两个文件先加载可能产生的不必要的问题。...TrueType Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。...同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。 EOT – Embedded Open Type (.eot) EOT是嵌入式字体,是微软开发的技术。...OpenType (.otf) OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。...但是IE只支持微软自有的EOT格式字体,需要用字体转换工具将其转换为EOT格式,其他浏览器都不支持这一字体格式,其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体
3——PDF格式背景改变方法 点击 编辑 -》首选项-》辅助工具-》选中“替换文档颜色”和“ 自定义颜色”-》将背景颜色改成你想要的背景颜色。...FireFox 颜色设置: 1、打开火狐浏览器,最上面一排的菜单上,选择:工具(T)/选项(O),出来一个选项框。 2、选项框中顶部有一排图标,点一下第三个蓝色地球的图表(文字提示为“内容”)。...3、选项框的右侧偏下,有“高级”和“字体”两个选项,分别点击之后,自定义字体大小和文字及背景的颜色即可!俺的建议是黑色背景浅色文字+大字体。...Chrome新扩展:Webpage Decorator支持自定义网页颜色和字体 Webpage Decorator 这个Chrome浏览器扩展提供了一些可以自定义网页颜色主题和字体的选项。...窗体、Chrome、IE网页背景颜色 Eclipse自动提示, 字体大小, 显示行号
本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如hover时候反色。...一个图标字体里面的元素 如何制作图标字体 需要准备PS和AI,打开UI图,选中图标的图层,通常它是设计师画的一个形状: ? ? 1....使用PSD to SVG增加便利 现在重点说下,图标字体的使用和一些注意事项 图标字体的使用 通过font-face导入自定义字体,可以参考字体下载后的demo。...注意缓存 后续加了新的图标字体,如果不做处理的话,已经加载过的浏览器可能会有缓存,导致新的图标字体不会重新下载,所以需要处理这个问题。...至此,整个流程说明完毕~ 图标字体和SVG结合使用,提升网站的高清体验。
关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?...上面是官方的说法,通俗地理解有3个作用: 提取部分字体 转换字体格式 生成 webfont 和对应 CSS 样式 Fontmin 应用场景 有时候,我们想给网站的 Logo 、 Slogan 、标题、活动页等的中文自定义字体...,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几KB。...Squirrel 只有单纯的生成不同格式的webfont,且不支持中文。Web-fontmin不单止可以转换格式同时支持中文,还可以提取字体,并且有更快的上传和转换速度。...使用Web-fontmin:http://fontmin.forsigner.com/ Github 地址:web-fontmin 网页效果: 常用免费字体网站 推荐几个常用的字体下载王章: Google
图标 在写这篇文章之前,我一直以为上图中的“图标”是一个个的图片组成,但学习总是给人新知,现在我知道了它们只是一种字体,类似于“宋体”、“楷体”这种。...Iconfont 介绍 Iconfont 是阿里提供了一个图标库,你可以想象成是一个售卖图标的超市,挑选你需要的图标放入购物车,然后 Iconfont 会为你打包你购物车里的图标,自动生成一种新的字体,...查询资料后得知:虽然现代浏览器支持自定义字体样式,并且可以通过 @font-face 引入自定义的字体,但是各个浏览器对于字体样式是存在兼容性问题的,而这几个文件就是分别处理对应浏览兼容性问题的。...WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。...这种格式只在IE6-IE8里使用。【支持的浏览器:IE4+】 OTF / TTF OpenType Font 和 TrueType Font。
本文作者:IMWeb forsigner 原文出处:IMWeb社区 未经同意,禁止转载 关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体...上面是官方的说法,通俗地理解有3个作用: 提取部分字体 转换字体格式 生成 webfont 和对应 CSS 样式 Fontmin 应用场景 有时候,我们想给网站的 Logo 、 Slogan 、标题、活动页等的中文自定义字体...,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几KB。...Squirrel 只有单纯的生成不同格式的webfont,且不支持中文。Web-fontmin不单止可以转换格式同时支持中文,还可以提取字体,并且有更快的上传和转换速度。...推荐几个常用的字体下载王章: Google fonts Dafont Typekit 博客原文:http://forsigner.com/2016/03/13/web-fontmin/
svg雪碧图只兼容IE9+,而平台仍需要支持IE8的用户,为了避免矢量图和位图两套方案,选择了兼容性更好的iconfont,可以完美兼容到IE6。...遇到的一些问题 svg图标绘制 虽然目前线上有很多这种图标,但是为了我们平台的图标统一性和可沉淀,我们选择了自己绘制图标。...icon font支持不友好,如果字体比较小会有明显的锯齿,字体超过20px就会有所改善,因为这个只好把所有圆形的图标都换成图片了 低端的pc机上,icon font渲染不好,有一定程度的锯齿,chrome...也不例外 有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边 兼容问题 网上和iconfont.cn给出的推荐写法是: [@font-face](/user/font-face) {...遗留问题 IE8中,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod中,字体文件或阻碍其他资源下载。
给自己备份一份 原文档 快速上手 安装主题和插件 主题安装压缩包里包含了主题、插件两项内容,其目录结构如下: 主题安装压缩包 -- 1.主题文件 -- 2.插件文件 -- 9.静态文件未压缩版...静态文件未压缩版不需要上传至您的服务器,其中包含了 Mirages 主题的 css 和 js 未压缩版文件,根据需要保存到您的计算机上即可。...示例 themeSelectionBackgroundColor = #233333 主题字体加载方式 设置名:webFont 说明 不设置为使用主题(主机)内置字体,值设置为1则为使用Google字体...示例 # 使用 Google Fonts 加载字体 webFont = 1 # 使用主题内嵌的字体文件加载 webFont = 0 Shortcut Icon/网站图标/favicon 设置名:shortcutIcon...该选项仅在「主题字体加载方式」设置为「主题内置」的情况下生效。
; 设置 品牌信息文件夹路径 可以自定义页面样式和 Logo: 品牌信息文件夹路径相对于 filebrowser,图示路径为 filebrowser 根目录下的 style 文件夹; 文件夹内容示例:...自定义样式 将以下 CSS 代码保存到 custom.css 文件中并放在 品牌信息文件夹路径 的所在目录。...12/** 普通文字、字体图标颜色 */ 13.action, #listing h2, #search .boxes h3, .card h3, .collapsible > label *, .dashboard...暗黑模式主题效果 4.1. 加载页面 4.1.1. IE 警告 由于代码中使用了 JavaScript 字符串模板,IE 无法解析,页面会停留在加载页面,故不支持 IE 浏览器。 4.1.2....正常加载 4.2. 登录页面 4.3. 文件首页 4.4. 文件加载 4.5. 文件下载 4.6. 文件列表 4.6.1. 图标模式 4.6.2. 列表模式 5. 搜索页面 5.1.
大家好,又见面了,我是你们的朋友全栈君。 深度操作系统(deepin)是一个致力于为全球用户提供美观易用、安全稳定服务的Linux发行版,同时也一直是排名最高的来自中国团队研发的Linux发行版。...【退出登录并卸载】命名 优化外设目录下弹出外设回退路径,由主目录变为计算机 优化Ctrl和Shift+鼠标左键框选,与方向键执行正反选的逻辑一致性 影院 新增视频信息接口 新增在自定义软解播放选项增加解码设置...,任务栏图标右键的所有窗口未翻译的问题 修复快速点击地址栏前进、后退按钮出现崩溃的问题 修复从设备上传超过10M大小的jpeg格式图片,键盘按ESC键无法退出弹框并且焦点在自定义标签页上的问题 修复长按自定义标签页快捷图标...,无法调起右键菜单的问题 修复深色主题模式下,浏览器窗口化状态显示浅色滚动条的问题 修复设置自定义背景后做重置操作,已打开的标签页背景不会恢复到默认的问题 修复已打开标签页的自定义背景选项无法自动同步的问题...修复搜索框设置谷歌为默认搜索引擎,地址栏和管理搜索引擎页面不显示logo问题 修复深色主题下将窗口拖动到最小,右下角有白色小块的问题 画板 修复同排文字含有不同字号时,文本光标位置显示错误的问题 显卡
领取专属 10元无门槛券
手把手带您无忧上云