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两节 ...
随机推荐
- [LeetCode] Read N Characters Given Read4 I & II
Read N Characters Given Read4 The API: int read4(char *buf) reads 4 characters at a time from a file ...
- Vue 常见问题汇总
Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...
- MinGW环境libssh2安装
由于实习工作中要用到基于sftp协议开发一个网络程序,同时要实现运行在Windows平台上,找来找去就这个libssh2库好用,在网络上算是有那么一点点的文档可以看.这个库还不是现成的,还要进行源代码 ...
- Android使用Custom debug keystore
有时候须要用到第三方API的时候,须要一个key store 的SH1值,比如使用百度地图API,假设是协同开发,就须要全部Eclipse使用同一keystore. 例如以下图所看到的: 这里须要注意 ...
- 菜鸟译文(二)——使用Java泛型构造模板方法模式
如果你发现你有很多重复的代码,你可能会考虑用模板方法消除容易出错的重复代码.这里有一个例子:下面的两个类,完成了几乎相同的功能: 实例化并初始化一个Reader来读取CSV文件: 读取每一行并解析: ...
- 支付宝对账单下载Java正式商户调用
package code; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; impo ...
- u3d中的坐标系
任何子级游戏对象 (Child GameObject) 的检视器 (Inspector) 中的变换 (Transform) 值都会相对于父级 (Parent) 的变换 (Transform) 值而显示 ...
- 使用flume将kafka数据sink到HBase【转】
1. hbase sink介绍 1.1 HbaseSink 1.2 AsyncHbaseSink 2. 配置flume 3. 运行测试flume 4. 使用RegexHbaseEventSeriali ...
- 【Android】输入设备配置文件(.idc文件)
何为idc idc(Input Device Configuration)为输入设备配置文件,它包含设备具体的配置属性,这些属性影响输入设备的行为. 对于touch screen设备,总是需要一个id ...
- 【Qt】qt库结构及示例
QT库结构 Qt图形库是一个组织严谨的C++类库,其结构如图所示 细说Qt库 Qt类库中包含了上百个类,结构十分复杂,上图展示了Qt_3.2类库的基本结构. Qt类库中的类可以分成两种类型: 一种是直 ...