CSS非ASCII字符最佳实践
问题场景
在写样式时经常需要用到非ASCII字符的属性值,如下:
1
2
3
4
5
6
7
8
9
10
11
|
.hot_list .sign_discount:before { content: "满减" ; padding: 0 8px; margin-right: 7px; font-size: 12px; line-height: 14px; color: #fff; text-align: center; border-radius: 11px; } |
但是Chrome下展示时有些时候会显示乱码:
除content外,font字体也是经常需要用于非ASCII字符的值,如font-family: “微软雅黑”
最佳实践
为避免以上这类编码问题,CSS推荐在涉及非ASCII字符时统一使用反斜杠转义以避免编码问题:
backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear.
详情请见:http://www.w3.org/TR/CSS2/syndata.html#escaped-characters
所以上例可以改成:
1
2
3
4
5
6
7
8
9
10
11
|
.hot_list .sign_discount:before { content: "\6ee1\51cf" ; padding: 0 8px; margin-right: 7px; font-size: 12px; line-height: 14px; color: #fff; text-align: center; border-radius: 11px; } |
CSS非ASCII字符最佳实践的更多相关文章
- 正则表达式 去除所有非ASCII字符
需求: 去除字符串中包含的所有外国字符 只能使用正则如下,找到包含非ASCII的记录 db=# select * from test where info ~ '[^(\x00-\x7f)]'; id ...
- css背景色半透明的最佳实践
之前项目中遇到纯色的半透明背景,都是这么干: <style> .box {width:300px;height:300px;position:relative;} .mask {width ...
- mysql 字符串字段中查找非ascii字符
select * from tabel_name where field_name not regexp "^[ -~]*$"
- 完美CSS文档的8个最佳实践
在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...
- 15条变量&方法命名的最佳实践【转】
原文地址:15 Best Practices of Variable & Method Naming 不同的代码段采用不同的命名长度.通常来说,循环计数器(loop counters)采用1位 ...
- python基础===15条变量&方法命名的最佳实践
不同的代码段采用不同的命名长度.通常来说,循环计数器(loop counters)采用1位的单字符来命名,循环判断变量(condition/loop variables)采用1个单词来命名,方法采用1 ...
- <读书笔记>《Web前端开发最佳实践》
P77 P89 CSS Reset P94 给CSS样式定义排序 排序工具:CSScomb P97 什么是CSS的权重?权重是指选择符的优先级 P100 工具:Sass Less P101 框架 ...
- 前端代码标准最佳实践:CSS
前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...
- Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
随机推荐
- jmeter经验----java 读取文件中文乱码问题
很少写java io的代码,今天整了一个发现 本地调试好好的,放到jmeter里就打印乱码.一番折腾,终于搞定~直接上代码: List<Order> orderList = new Arr ...
- Android 性能优化总结
App 流畅运行,是用户体验的第一步.App 流程运行,涉及到性能优化,主要涉及到布局优化, 绘制优化,内存泄漏优化,响应速度优化,列表展示优化,Bitmap 优化,线程优化,包大小优化. 布局优化 ...
- 批处理向FTP上传指定属性的文件 批处理增量备份的例子
使用windows批处理向FTP上传具有指定属性的文件,类似增量备份功能. 对一个目录里的几个文件自动上传FTP时只上传有归档属性的文件,然后FTP上传成功后自动清除(本机)刚上传文件的归档属性. 类 ...
- 牛腩学ASP.NET CORE做博客(视频)
牛腩学习ASP.NET CORE做的项目,边学边做. 目录: 01-dotnetcore网站部署到centos7系统上(时长 2:03:16) 02-前期准备及项目搭建 (时长:0:23:35) 03 ...
- Atitit 图像处理之编程之类库调用的接口api cli gui ws rest attilax大总结.docx
Atitit 图像处理之编程之类库调用的接口api cli gui ws rest attilax大总结.docx 1. 为什么需要接口调用??1 1.1. 为了方便集成复用模块类库1 1.2. 嫁 ...
- 菜鸟学SSH(三)——Struts2国际化自动检测浏览器语言版
前几天发了一篇Struts国际化的博客——<菜鸟学习SSH(二)——Struts2国际化手动切换版>,有网友提了一个意见,见下图: 于是就有了下面修改的版本: web.xml <?x ...
- Function.apply()在提升程序性能方面的技巧
我们先从Math.max()函数说起,Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8alert(Math.max(5,7 ...
- 每日英语:The Risks of Big Data for Companies
Big data. It's the latest IT buzzword, and it isn't hard to see why. The ability to parse more infor ...
- python中redis查看剩余过期时间以及用正则通配符批量删除key的方法
# -*- coding: utf-8 -*- import redis import datetime ''' # 1. redis设置过期时间的两种方式 expire函数设置过期时间为10秒.10 ...
- 光照渲染[Unity]
http://www.unitymanual.com/m/Manual/RenderingPaths.html http://wenku.baidu.com/view/54eca9e09b896802 ...