*bootstrap.css 是完整的bootstrap样式表,未经压缩过的,可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bootstrap样式表,内容和bootstrap.css完全一样,但是把中间不必要的空格之类的东西都删掉了,所以文件大小会比bootstrap.css小,可以在部署网站的时候引用,如果引用了这个文件,就没必要引用bootstrap.css了,下面的文件同样。
由于国产化进程的不断推进,冒出了不少基于 Linux 的国产操作系统,这就导致我们平时在 windows 上使用的好好的字体,在这些国产操作系统上就失效了,其原因是这些操作系统上没有安装对应的字体。
首先需要准备好字体,字体大家自己百度找一下就行了(字体不建议文件太大的) 其实只要改一下css就好了,一般都是在style.css,没有css文件就自己创建一个 这里我就以Typecho示例,Typecho这样的程序css都在主题里面,找到主题文件夹就好了 之后打开自己的css文件夹打开style.css或者其他css都可以,加上如下代码 字体文件格式可以自己转码,一般woff、ttf、otf、svg四种格式已经可以兼容市面上99%的浏览器了
引入魔改样式的方法很简单,自建一个css文件,然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件,然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low。
400–>normal(正常粗细) 200–>lighter(细) 700–>bold
如上面的代码目录所示,字体文件和样式都放在了/src/assets/fonts/目录下。点我直接下载相关文件
一直都用博客园写博客,后面自己曾经想自己写一个博客项目,但是因为各种各样的事情最后做了一半就没能继续做下去。但是中间定制markdawn样式的时候接触到的代码高亮插件highlight.js倒是给我留下了很深的影响,今天有时间于是决定利用当初的经验重新diy一下博客园的代码块样式,算是对夭折的博客项目的一个弥补吧。
目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。 fis 编译流程 官方的这张图,对fis的构建流程讲述的很清楚了,主要包括单文件编译和打包,业务中的插件也主要是这两
参考 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 ) 博客 , 编写 meta 视口标签 , 视口标签内容如下 :
随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。
官方的这张图,对fis的构建流程讲述的很清楚了,主要包括单文件编译和打包,业务中的插件也主要是这两种,至于是pre还是post,差别不是特别大。主要记住一点区别:单文件编译阶段,无法获取文件之间的关联信息;打包阶段,能够拿到项目的所有文件
但是该博客下提供的代码高亮css文件项目已经失效了,既然如此,我这里就再提供一篇较为完整的教程,仅供参考
字体图标显示,引入css就足够了,无需引入 layui.js,使用到模块时才必须引入js文件
Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序,Hexo 可以遍历博客的各个页面,将博客文章等内容渲染到主题(即页面模板)之中,生成全部页面的 HTML 文件及其引用的 CSS、JS 等静态资源。这些静态资源文件常常通过托管到 Pages、托管到对象存储或者自建 Nginx 服务器的方式来对外提供访问。
图标字体,相信大家都不陌生。包括 font-awesome,iconic 等等,都是很不错的图标字体服务。
导读:在产品中适当使用图标,可以让产品更生动,也更简洁。在前端项目中,处理和引入图标都是必不可少的环节。在 Web 产品中引入图标,大致经历过如下几个阶段:使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标(font icons)、使用 SVG(inline SVG/SVG sprites)、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进,以及我们在百度设计语言系统推进过程中相关的一些尝试。
1.CSS有几种引入方式? link 和@import 有什么区别? 第一种:在head部分加入<link rel="stylesheet" type="text/css" href=""/>引入外部
SPA(单页应用)在初次加载时,由于需要加载所有必要的 JavaScript 和 CSS 文件,以及应用的主 HTML 文件,因此可能会产生白屏时间较长的问题,对用户体验而言是非常糟糕的。
有些网站需要加载谷歌字体,由于网络问题或者某些问题,fonts.googleapis.com访问太慢会导致站点加载很慢。虽然最后能看到网站,但实际上谷歌字体依然加载失败了,这个体验就非常差劲了。
日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加载性能起到非常关键的影响,因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。
实际上e942是这个字符的16进制unicode编码,在unicode编码中,E000-F8FF是用户自定义区,形状可以任意制定。如果我们向网站引入自定义后的字体,就可以用上面的方式显示图标了。
CSS,全称是Cascading Style Sheet,翻译过来就是层叠样式表。
https://unpkg.com/browse/element-ui@2.15.6/lib/theme-chalk/fonts/
自己写的测试工具发现最近打开页面时快时慢,查了原因,发现是css引用的谷歌字体源:fonts.googleapis.com
层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言
在上篇文章 探究网页资源究竟是如何阻塞浏览器加载的 中介绍到 JS 会阻塞 DOM 的加载,样式会阻塞页面的渲染,外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验,诸如此类问题还有挺多,那到底该如何解决它们呢?
在 static 文件夹下创建 font 文件夹。并将下载好的字体拷贝到文件夹下。
1.创建 style_css 文件夹,在当前文件夹下 新建 index.css 和 引入字体包。
css是什么:CSS是层叠样式表(Cascading Style Sheets)的简称,有时我们也会称之为CSS样式表或级联样式表。CSS 是也是一种标记语言。 有什么用:主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS是一种描述HTML文档样式的语言,CSS描述应该如何显示HTML元素。
上一节我们学习了,webpack如何打包样式文件以及如何自动添加前缀。本节我们继续学习如何打包@import引入的样式文件,css模块化以及如何打包字体文件。
今日打卡任务 Day7参考答案 打卡作业 Day07 作业布置 一. 完成课堂所有的代码 已完成 二. 自己查一个列表并且完成 三. 完成table的作业内容 四. 说出表单元素什么情况下使用name和value? name元素的作用是后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交 表单中不可或缺的元素 一个form表单中该元素的名称对应不同类型的input是不同的 value是 后台接收数据时使用的键值对中的值(value) value可以有默认值 五. 说出form提交时的属性作
💬个人网站:【芒果个人日志】 💬原文地址:Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn) 💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入的研究。 💅文章概要:在开发网页的过程中,我们
在讲正文之前,看到了一篇「九边」大佬写的<笨功夫是普通人最后的依靠>文章. 其中有一些文字很打动我. 然后,秉承着「独乐乐不如众乐乐」的想法,给大家分享出来. 以下是我认为最好的一段文字,如果想看全文,可以搜索文章名字进行查阅.
有的网站字体,用户电脑上没有,如果只是单纯的定义 font-family 是不起效的。 我们可以将字体文件放置在网站目录(知道君喜欢放在OSS,但是这个需要注意跨域的问题),直接引入,这样即使用户电脑上没有该字体也能自动加载。设置方法如下: css 代码:自定义字体
解释: 1、Configuration cfg 使用了freemaker starter后,在项目启动时即会自动初始化 Configuration 对象到Spring容器中; 2、Template template = cfg.getTemplate("test.ftl","UTF-8"); 模板因cfg本身在Spring容器中,则在获取test.ftl模板是就会自动在resource/templates下寻找模板,默认:ftl 格式,可以修改 3、因为找了很多例子都是使用ITextRenderer 对象来渲染输出渲染的PDF,但ITextRenderer有一个问题是要解决中文不显示问题,必须把字体放在一个以 文件夹 路径访问的形式引入,SpringBoot打包后,经测试,无法获取打包后的FONT字体; 则,再另辟途径,又找到以Document方式,但document需要的是,没一个dom对象都必须一个个添加进去,网上很多都是new 专门的对象,比如:块 Paragraph 然后添加文字(数字)内容。 所以又搜索:是否可以往document插入html 最终找到:https://www.cnblogs.com/mvilplss/p/5646675.html
注意:新版iconfont支持多色图标,这些多色图标在Unicode模式下将不能使用,如果有需求建议使用Symbol的引用方式
本文只针对handsome主题,也是综合了在hexo和部分typecho主题中引入矢量图标的经验及网络上已有教程进行经验总结分享交流,有出入的地方还望大家指出,共同交流进步。
rem 是根 em(root em)的缩写,是相对于根元素(html 元素)的字体大小。
icon在我们前端日常开发中是很常用的,它有很多种使用方式,时至今日,它的使用方式经过了很多种演变,本文会为大家介绍icon的一些历史演变,分析一下这几种使用方式的优劣,我们将采用svg sprites这种方式使用icon,演示代码使用vue+vue-cli3+,看完之后,你会发现这种使用方式完全称得上优雅二字
mpvue 跟 wepy 真的很难抉择,我目前没有兼容多平台的需求,所以直觉告诉我还是用 wepy 吧~
fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。
Butterfly主题使用阿里巴巴iconfont⛄yooo~ 今天教大家美化Butterfly的字体图标⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?⛄可以使用阿里巴巴iconfont来拓展啦Butterfly版本:4.5.1选择图标iconfont图标库地址:iconfont-阿里巴巴矢量图标库找到自己需要的图标之后点击 添加入库图片图片将图标添加至项目中图片生成代码 并 复制代码图片图片Butterfly配置新建css文件在Butterfly主题文件夹下的 /s
前两天在做一个pdf导出功能,使用的插件是kartik-v/yii2-mpdf,此插件使用的是mpdf
网站的性能一直是前端工程师努力的方向之一,更加流畅的体验,更加快速的页面呈现,都是好的web网站的指标之一。
领取专属 10元无门槛券
手把手带您无忧上云