最近，我惊喜地发现了一个CSS媒体特性——scripting，它能够在所有现代浏览器中使用。...这意味着，我们可以根据用户浏览器是否支持JavaScript来提供不同的CSS规则，从而减少未样式化内容的闪烁或不受欢迎的布局偏移。...CSS媒体查询第5级W3C工作草案[1]中提到了一些它可能有用的场景。 ❝例如，打印页面，或者在服务器上渲染页面并发送给用户的预渲染网络代理。...特性出现之前 在这项特性出现之前，检测JavaScript支持的一种方法是通过在html标签上设置一个自定义选择器——常见的做法是添加一个no-js类名。...结语 总的来说，scripting媒体查询是一个强大的工具，可以帮助我们为支持JavaScript和不支持JavaScript的环境提供适当的样式。
使用 SVG 方式： 在 CSS 中，为了标识出点击、放大等这种特定动作的交互，一般我们会使用: .demo { cursor: pointer; } 除了这种指定常规关键字的方式外，还有一种方式就是指定...经过测试，cursor 属性对配置的图片有大小限制：Chrome 上宽高超过 120 px J就无法展示对应的图片。...使用 Emoji ： 除了上述 SVG 、PNG 图片的方式外，还可以展示 Emoji，本质上还是借助 url()+ svg 的方式。...Cursor 属性示意图 from twitter 其中关于 cursor: pointer 的使用，规范中的说明是用于链接的形式，貌似很多时候我们在交互上会使用这个展示♀️。...W3C Cursor 说明：https://www.w3.org/TR/css-ui-3/#propdef-cursor SVG url encode 工具：https://yoksel.github.io
今天，居然发现了一个IE支持，而Firefox确不支持的CSS属性。....peopleBox a { text-indent:-999px; } 测试的时候，发现IE下表现良好，但是Firefox确无动于衷。...一直以来，从小到大，思想里从来不会出现这样的情形，所以当时确实是大吃一惊。
CSS Working Group 简称 CSSWG, 在近期的会议中决定将 if() 添加到 CSS Values Module Level 5 中。...详情可见：css-meeting-bot 、[css-values] if() function 当我看到这个消息的时候，心中直呼这很逆天了，我们知道像 less 这些 css 这些预处理器也是支持 if...所以，如果 css 原生支持 if() 函数的话，我们就可以利用 if() 函数在运行时的动态性，省去大量的 js 逻辑处理了， 使得我们在处理样式交互上方便很多。...可选值，不传为空，当条件 condition 为 false 的时候应用的 css 值看起来就和js的三元表达式一样if() 函数还支持构建 css 属性值的部分属性同时if() 函数也支持嵌套定义这里使用...= 进行变量比较但是这种嵌套使得阅读起来不方面，if() 函数同时还支持扁平化的写法这样写就清晰很多了，满足哪个分支就返回对应的属性值应用场景if() 函数我相信会让主题切换更加方便快捷比如一个设置背景颜色随主题变化进行动态调整的代码就可以写成这样
什么是Lightning CSS Lightning CSS简单理解就是Rust版本的PostCSS,然后 Lightning CSS内置了一些功能，比如 CSS压缩，语法降级，语法支持前缀，CSS...使用webpack css-minimizer-webpack-plugin已经内置了对Lightning CSS的支持。...提供支持。...当你只需要编译CSS，而不需要来自更大的构建工具（如代码分割和对其他语言的支持）的更高级功能时，可以使用CLI。...这将跳过无效的规则和声明，在输出中省略它们，并产生警告而不是错误。 source maps Lightning CSS支持在编译、压缩和打包源代码时生成源映射，以便更容易进行调试。
项目中遇到一个奇怪的问题：那就是部分浏览器不支持CSS缩写的属性： 最常见的就是background属性 譬如background-size 另外说下opera内核的浏览器也是不支持：标注的为不支持 background...:url(url) no-repeat center center scroll /50% 50% rgba(0,0,0,0); IE6.7.8不支持的 让IE兼容background-size的方法 .
而本文，将给大家介绍一下最近各大浏览器也逐渐开始原生支持的三角函数： sin() cos() tan() CSS 三角函数语法介绍 首先，我们来看看 CSS 三角函数的使用方式： .box { /*...需要注意的是，三角函数在 CSS3 中仅对弧度（radian）单位进行支持。如果想要在开发中使用三角函数，可以借助转换函数 deg() 和 rad() 将角度（degree）和弧度进行转换。...对 box-shadow 足够了解的同学应该知道，box-shadow 是支持多重阴影的，借助这个特性，出现了很多单标签，借助 box-shadow 来绘图的案例。...借助三角函数、以及box-shadow 是支持多重阴影的这两个特性，我们就可以利用它们来实现波浪线。 当然，可以还需要借助 SASS 简化手动书写的代码量。...Demo -- border-radius 我之前也尝试使用三角函数，实现了一副丑一点的： Codepen Demo -- CSS-Doodle fish & seaweed 总结一下 CSS 原生支持的三角函数
标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312 宋体：SimSuncss中中文字体...方正舒体：FZShuTi 方正姚体：FZYaoti 华文彩云：STCaiyun 华文琥珀：STHupo 华文隶书：STLiti 华文行楷：STXingkai 华文新魏：STXinwei Windows 中的中文字体...Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集， 楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。...（注：Windows 3.X 只能支持 GB2312-80 字符集） Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集， SimSun-ExtB...现在纠正网上普遍的一个错误： GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号 与简体中文有关的代吗页如下： 936 gb2312 简体中文(GB2312)————其实是
简要教程 jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3，使用非常炫酷和方便。 ?......{}, // popup close after function onPopupInit: function(){} // popup init after function}); 该支持...animate.css动画的jquery弹出层插件的github网址为：https://github.com/romamaslennikov/jquery.popup.js 推荐阅读： 【公共UI】纯CSS3...Material Design风格单选框和复选框 纯CSS3彩色进度条动画开发源码 CSS3 animation属性 实现地球转动 【程序员装B系列】八种CSS3按钮动画特效 【前端小技巧】CSS3实现环形进度条
最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。...这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。 我在自己的博客页面我的小铺页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 ?...CSS Dark Mode 我定义了变量以设置主题的颜色，我建议你也这样做，因为这样会使这个过程容易得多。...现在我们需要定义一组新的变量，这些变量将在调用 CSS 暗模式时使用。...如果有人使用深色操作系统主题并访问您的网站，您的网站现在将自动切换到黑暗模式。 下面是我博客博客小码页面，效果，支持手动切换和自动切换两种。
首先，在此感谢Arcgis for Android群里的一位成员，大家可以加进来QQ群号：337469080。...不论是Arcgis for Android的哪个版本，都没无法解决中文乱码的问题，这个与Android中自带的字体库有关，可以参考http://mobile.51cto.com/android-265238
导致网页不支持选中、复制、搜索、翻译、矢量缩放，也会影响视障用户使用读屏器操作网页。 3.带来更多带宽消耗。导出的图片体积随着文本面积增加，且字形无法重复利用，这消耗着大量的服务器资源。...WebFont技术提供了在网页使用特殊字体的可能，从而避免用图片的方法。它的实现方法是通过CSS的@font-face引入字体。...2.浏览器支持 不同浏览器对字体的支持也是不同的，没有一种可以支持所有浏览器的字体，这就要求我们针对不同的浏览器制作不同的字体。...作为业界首款中文 WebFont 本地自动化压缩与转码工具，中文字体 web 化问题迎刃而解。它是一个 web 字体工具，通过自动化技术来压缩、转码跨平台的中文字体，让网页自由嵌入中文字体成为可能。...原理 1.爬行本地 html 文档，分析所有 css 语句 2.记录@font-face语句声明的字体，并且记录使用该字体的 css 选择器 3.通过 css 选择器的规则查找当前 html 文档的节点
matplotlib.pyplot as plt import matplotlib as mpl '''mpl.rcParams['font.sans-serif'] = ['FangSong'] 设置中文字体的方法...应该可以''' font = mpl.font_manager.FontProperties(fname='/System/Library/Fonts/STHeiti Light.ttc') # 不设置中文字体会显示成方块...，图表显示的中文必须为unicode格式，将字体文件重命名为font，STHeiti Light为mac的黑体 mpl.rcParams['axes.unicode_minus'] = False #解决图像是显示负号...'-'为方块的问题 x = arange(-6, 6, 0.01) y = 2 * x - 3 plt.plot(x, y) plt.title(u'中文',fontproperties=font)
CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.没有网页安全的中文字体相比通常只有几十 KB 的英文字体，网页加载一个...GB2312 的中文字体至少要增加 2 MB 以上加载量，而大部分中文字体都在 5 MB 以上。...下表可以看到各系统预置的中文字体——各系统根本没有相同的字体，即没有网页安全中文字体！...这些字体是由用户的浏览器在渲染网页时下载的，然后应用于你的文本。使用网络字体的主要缺点是它会减慢你网站的加载时间。在旧的浏览器中，对CSS3的支持也很有限，而使用网络字体是需要CSS3的。...虽然这种方法可以确保字符在不同浏览器和计算机上的正确显示，但其缺点是无法进行文本搜索和复制粘贴等操作。引用多个字体：如果设计者希望在网页中使用多种中文字体，可以在 CSS 样式表中指定多个备选字体。
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。...谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS...CSS题目（七）-- 消失的边界线问题 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线 谈谈一些有趣的CSS题目（十）-...Tahoma 十分常见的无衬线字体，字体结构和 Verdana 很相似，其字元间距较小，而且对 Unicode 字集的支持范围较大。...例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体。
EOT 字体是 IE 浏览器的首选格式，其他浏览器都不支持；其他浏览器更钟爱常见的 TTF、SVG、WOFF。...，简单计算下，中文字体文件大小也几乎达到英文字体文件的数十倍。...我选择使用 font-spider-plus，毕竟改版过的，bug 更少，功能更多，还支持线上动态渲染的页面。唯一的不足就是官方文档写的太含糊了，许多人看了根本不知道怎么用。...引入 CSS 最后一步就是在你的网站中引入该 CSS，具体的做法大同小异，以 hugo 为例，先将 fonts-zh.css 复制到网站主题目录的 static/css/ 目录下，然后在 最后让网站的 body 使用该中文字体，具体的做法是修改 body 的 css，以 hugo 的 beatifulhugo
随着历史变迁与文明演变，现今在社会上流传较广的字体，更多强调的是简单易记或彰显个性。 在 GitHubDaily 以往发布过的开源项目中，也包含不少实用、有趣的字体及字体转换工具。...McDonalds Fries Font 聊完中文字体，我们来看下，在不久前，由麦当劳一家授权经营企业所开源的英文字体：McDonalds Fries Font。...带有满满的薯条和番茄酱设计风格： 这款字体支持应用到 Illustrator、Photoshop、Keynote 、Sketch 等软件上。 字体免费开源，不过在商用时，需要标注字体名称。...下方为该 Demo 的具体演示视频，对此感兴趣的，也可以亲自上手试一下。...GitHub：https://github.com/saurabhdaware/text-to-handwriting 令人欣喜的是，它竟然还支持自定义中文字体！
中文字体 如果我们要在 pdf 中打印中文，就需要设置中文字体，tcpdf 默认支持两种中文字体：stsongstdlight 和 cid0cs。...原因和同一段 html 代码通过 chrome 查看和通过 ie 查看效果不一样相同，因为浏览器要渲染 html，chrome 和 ie 的渲染引擎不同，自然表现就不一样，而且对 css 的支持也不一样...同样，tcpdf 也是自己渲染 html，所以同一段 HTML 代码的渲染效果和浏览器不同也是正常的，然后对于很多 CSS 不支持也正常，因为毕竟 tcpdf 不是浏览器，又是自己解释 html，不可能做到像浏览器那样...ok，现在我们知道，tcpdf 对 html 的渲染效果和浏览器有差别，支持的 CSS 有限，支持的 HTML 标签也有限。那怎样在使用 tcpdf 打印 pdf 时尽可能的调整出自己想要的效果呢？...标签的间距 首先，tcpdf 并不支持 CSS margin 属性；然后 tcpdf 为每个 html 标签都设置了默认的 margin；最后我们通过 setHtmlVSpace 函数对每个标签的 margin
说来也巧最近不知道发点什么文章，在后台测试代码的时候看见网友在文章“修改网页自定义字体的CSS代码+图文教程”反馈，怎么在css里汉字和字母使用不同的字体，应该怎么判断和实现，这个问题问得好，文章有内容了...所以在定义字体的时候把英文的字体写在前面把中文的写在后面。这样，系统就会自动按顺序依次给字用字体，如果当前字体不支持文本，自动换用列表中的下一个字体。...我们来看一看 CSS 中字体的 Fallback 机制： ?...还会暴露出一些奇怪的 bug，如在这些版本号的浏览器下使用中文字体（比方微软雅黑），要把该中文字体放到font-family属性的首位，可是会导致英文字体也会使用该中文字体渲染。...即在这些浏览器（IE7、IE8）下不支持在font-family属性中为英文和中文字体分别使用不同的字体，所以我最终还是选择不区别，毕竟折腾来回意义并不是很大，但是代码却多了很多。
，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。...尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。...但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。 方案一： 你可以使用英文来替代。...方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。...，我们尽量只使用宋体和微软雅黑中文字体 font-weight:字体粗细 字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
