以前给网页设置字体，需要读者的操作系统中安装相应字体才可以显示，所以之前在网页作品中，使用了其他的创意字体，那么需要生成相应的文字图片来替换，否则不会显示。
本次更新下载：http://pan.baidu.com/s/1skXzG4H 源码文档见官方群（以下为7.4更新内容） 逆天工具 CDN 资源库 国内 Bootstrap中文网开源项目免费 CDN
Demo 可以参考：http://idv3.sinaapp.com 中标题字体的用法，具体用法如下：
除了上一节我们讲到的背景以外，字体也是一个我们最常用到的属性，接下来我们就来讲一讲CSS字体。
译者：黄梵高 https://juejin.cn/post/6887478219662950414
想对某个结构元素式样样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可使用not选择器。
CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.
在前几天，我们写了，关于如何利用fetchpriority对页面资源进行优先级的处理。
字体实现方式 在CSS中，我们会发现下面的语句（通常在style.css文件内） font-family: "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif; line-height: 1.8; font-size: 16px; background: #f5f5f5; color: #848484; font-weight: 300; overflow-x: hidden 1234567 font-family: "Micr
Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序，Hexo 可以遍历博客的各个页面，将博客文章等内容渲染到主题（即页面模板）之中，生成全部页面的 HTML 文件及其引用的 CSS、JS 等静态资源。这些静态资源文件常常通过托管到 Pages、托管到对象存储或者自建 Nginx 服务器的方式来对外提供访问。
一个非创意性质的网页，最重要的内容，就是文字。出现了文字，就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节，往往是非常重要的细节。
网络安全字体是由许多操作系统预先安装的字体。虽然不是所有的系统都安装了相同的字体，但你可以使用网络安全字体堆栈来选择几种看起来类似的字体，并且安装在你想支持的各种系统上。如果你想使用预装字体以外的字体，从CSS3开始，你可以使用网络字体Web fonts - Learn web development | MDN。
博客改了一下字体，字体放在了腾讯OSS里，好家伙，这下肯定比把字体文件放本地好多了，下面简单记录一下改字体的过程，其实不复杂，就是在那个字体跨域废了点时间，主要还是我菜，但是经过折腾后发现，还是把选择把字体文件存在github仓库里比较好，各位自行选择吧。
图标字体，相信大家都不陌生。包括 font-awesome，iconic 等等，都是很不错的图标字体服务。
一、web font web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体： a）、安装好操作系统后，会默认安装一些字体，这些字体文件描
最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。（其实我的博客也弄了只不过他们不看而已）。
我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原： 使用图片背景还原设计，即使用 photoshop 将文本图层单独导出成网页背景图片。 产生的问题 1.制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐，后期修改更加繁琐。 2.用户体验差。导致网页不支持选中、复制、搜索、翻译、矢量缩放，也会影响视障用户使用读屏器操作网页。 3.带来更多带宽消耗。导
最近发现Wordpress有时候加载的特别慢，于是就想办法找了下原因。之前听网上说是因为wordpress用的是Google的字体库，而且是每次都要加载，导致访问慢的，于是当时装了个Disable Google Fonts的插件，禁用了Google字体，然后装了一个Useso take over Google插件，将字体文件改为360托管的字体库，这样就可以访问快点了。当时的效果的确挺好的，结果最近在使用的时候又发现网站访问慢了，用Chrome查了下资源加载的情况，发现访问useso的字体库的时间特别的长。这时候改用Google字体的时候反而更快了。。。这就十分令人惆怅了，有时候用useso的快，有时候用google的快，真的挺麻烦的。后来想想干脆把这个文件下到服务器上不就好了么。。。于是就倒腾出了下面的办法，将当前主题的字体文件下载到了服务器上。
这篇博客主要是记录 tcpdf 在使用中的一些要点和注意事项。这里使用的 tcpdf 版本是 6.2.13。
今日打卡任务 Day7参考答案 打卡作业 Day07 作业布置 一. 完成课堂所有的代码 已完成 二. 自己查一个列表并且完成 三. 完成table的作业内容 四. 说出表单元素什么情况下使用name和value？ name元素的作用是后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交 表单中不可或缺的元素 一个form表单中该元素的名称对应不同类型的input是不同的 value是 后台接收数据时使用的键值对中的值(value) value可以有默认值 五. 说出form提交时的属性作
W3C 仍然在对 CSS3 规范进行开发。不过，现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其实挺多，但一直懒于写blog，也经常会出现一些知识点重复去查询，一些知识点难以及时分享与讨论。ADT团队在不断的成长与壮大中，于是鞭策自己尽量多的习惯去记录，也为了知识更好的分享与积累吧。 现在来看，应该大家都接触过css3的自定义字体（@font-face），也应该知道各个浏览器都支持（包括IE6），只是各自对字体文件的格式的支持不一样。 为什么要
现在，我们就要针对wordpress影响网站响应速度的因素进行具体问题具体分析，并探求正确的方法论高效率有效地解决问题。
英文：jbtronics 译文：枫上雾棋 https://segmentfault.com/a/1190000012901505 除了使用 JS 追踪用户，现在有人提出了还可以使用 CSS 进行网页追踪和分析，译者认为，这种方式更为 优雅，更为 简洁，且 不好屏蔽，值得尝试一波，了解更多，可查看 仓库地址(https://github.com/jbtronics/CrookedStyleSheets) 和 demo(http://crookedss.bplaced.net/) 我们可以用它来做什么
SPA（单页应用）在初次加载时，由于需要加载所有必要的 JavaScript 和 CSS 文件，以及应用的主 HTML 文件，因此可能会产生白屏时间较长的问题，对用户体验而言是非常糟糕的。
有很多时候，Wordpress 的字体不能让我们满意，这个时候我们就可以通过一些方法来修改主题的默认字体，来达到我们想要的效果。
面试官：你认为前端工作中最重要的是什么？ 答：用户体验！ 面试官：如何可以提升用户体验？ 答：从提升项目性能开始！ 面试官：如何才能提升项目性能呢？ 答：对项目进行优化! 面试官：如何对项目进行优化？ 答：主要从项目加载时以及运行时两方面进行优化。 面试官：如何进行加载时的优化？ 答：主要从以下几方面入手： CSS 写头部，JavaScript 写底部：所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就会空白了，所以 JS 文件要
导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。
除了使用 JS 追踪用户，现在有人提出了还可以使用 CSS进行网页追踪和分析，译者认为，这种方式更为优雅，更为简洁，且不好屏蔽，值得尝试一波。 我们可以用它来做什么 我们可以收集关于用户的一些基本信息，例如屏幕分辨率（当浏览器最大化时）以及用户使用的什么浏览器（引擎）。 此外，我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上，用来追踪用户悬停的链接，甚至可以追踪用户如何移动鼠标（在页面使用不可见的字段），然而，使用目前我的方法只能追踪用户的第一次点击或悬停，我相信，修改我的方法最终可以实现追踪用户
在上篇文章 探究网页资源究竟是如何阻塞浏览器加载的 中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？
根据httparchive.org的页面重量报告，CSS在平均70个请求和2MB的网页上占7个HTTP请求和70Kb的代码。这并不是网站性能糟糕的最坏原因（我正看着你呢，JavaScript），但CSS面临着特定的挑战：
结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验，这也需要优化你的CSS。
💬个人网站：【芒果个人日志】 💬原文地址：Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn) 💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要：在开发网页的过程中，我们
考虑添加 preconnect 或 dns-prefetch 资源提示以建立与重要第三方来源的早期连接。
所有的html标签中，表单标签是最重要的。在实际开发中，最经典的实例就是用户注册，覆盖了表单标签的所有的元素。效果图如下：
前一段时间听闻Google退出ubuntu字体的时候，使用了一下，从而了解到 font-face 的用法：
近期遇到了两个线上服务的问题，一个后端应用和一个前端项目，它们存在一些 bug 和历史遗留问题。为了不影响用户的使用体验，决定对它们进行一次优化。
本文版权归作者所有，转载请注明作者和出处。 未经作者许可，请勿将本文用作商业用途。 封面来源：见图片水印 Markdown 是一种轻量级的标记语言，它的文本可以转换为 HTML ，加上 CSS 的样式控制，能够很方便快捷进行文章排版。Markdown 解决了一文多处投放（微信公众号+博客）以及排版的问题。 CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中。
CSS高级技巧 精灵图 css sprites >为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites; > 精灵技术主要针对背景图片, 精灵图就是一张大的背景图片 > 使用时主要移动背景图片位置，使用backgroud-position属性 > 一般情况下都是往上走，往左走，所以backgroud-position的值都是负值 字体图标iconfont > 字体图标展示的是图标，本质上是文字；可以改变颜色等属性 > 字体图标需要下载，
前端优化是一个至关重要的过程，它不仅影响到网站的用户体验，还可能影响到网站的搜索引擎排名。
众所周知，相对于英文字体，中文字体天生是“庞然大物”。英文字体两三百KB已经很大了，而中文字体几MB十几MB都算小的。一方面，中文字体包含的字形数量极多，动辄数以千计甚至万计，而英文字体则只需包含几十个基本字符和符号，哪怕支持多种语言及字符变体，容量达到三千多个字形已经算非常庞大的了。另一方面，中文字形的曲折变化复杂度高，在基于轮廓的矢量字体设计中，用于控制中文字形曲线的控制点普遍比英文更多，因而需要的数据量更大，也会导致字体文件膨胀。
网站的性能一直是前端工程师努力的方向之一，更加流畅的体验，更加快速的页面呈现，都是好的web网站的指标之一。
日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。
用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。 属性可以接受绝对值或相对值，绝对值单位包括像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等，相对值单位包括 em、rem、vw、vh 等。
在@font-face处理兼容中出现了一个#iefix这个东东？到底是神马东西呢？ 案例： 首先先了解关于@font-face的基本知识 1、@font-face 与 EOT 格式 之所以把它们放到
gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十KB，效果远远不如imagine、tinypng等压缩方式，所以此处不再写使用gulp压缩图片的内容）。
不少博主喜欢美化自己的博客，而一个好看的字体可以让人眼前一亮，还可以提高阅读舒适度。作为一个二次元类（伪）的博客怎么能没有一个可爱的字体呢？
在开发 webapp 时，发现在 android 端的中文会莫名其妙的向上偏移。为了解决这个问题，尝试了很多方法，最后使用以下解决方案。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
