问题场景

在写样式时经常需要用到非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字符最佳实践的更多相关文章

  1. 正则表达式 去除所有非ASCII字符

    需求: 去除字符串中包含的所有外国字符 只能使用正则如下,找到包含非ASCII的记录 db=# select * from test where info ~ '[^(\x00-\x7f)]'; id ...

  2. css背景色半透明的最佳实践

    之前项目中遇到纯色的半透明背景,都是这么干: <style> .box {width:300px;height:300px;position:relative;} .mask {width ...

  3. mysql 字符串字段中查找非ascii字符

    select * from tabel_name where field_name not regexp "^[ -~]*$"

  4. 完美CSS文档的8个最佳实践

      在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...

  5. 15条变量&方法命名的最佳实践【转】

    原文地址:15 Best Practices of Variable & Method Naming 不同的代码段采用不同的命名长度.通常来说,循环计数器(loop counters)采用1位 ...

  6. python基础===15条变量&方法命名的最佳实践

    不同的代码段采用不同的命名长度.通常来说,循环计数器(loop counters)采用1位的单字符来命名,循环判断变量(condition/loop variables)采用1个单词来命名,方法采用1 ...

  7. <读书笔记>《Web前端开发最佳实践》

    P77 P89 CSS Reset P94 给CSS样式定义排序    排序工具:CSScomb P97 什么是CSS的权重?权重是指选择符的优先级 P100 工具:Sass Less P101 框架 ...

  8. 前端代码标准最佳实践:CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

  9. Vue中CSS模块化最佳实践

    Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...

随机推荐

  1. [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 ...

  2. Vue 常见问题汇总

    Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...

  3. MinGW环境libssh2安装

    由于实习工作中要用到基于sftp协议开发一个网络程序,同时要实现运行在Windows平台上,找来找去就这个libssh2库好用,在网络上算是有那么一点点的文档可以看.这个库还不是现成的,还要进行源代码 ...

  4. Android使用Custom debug keystore

    有时候须要用到第三方API的时候,须要一个key store 的SH1值,比如使用百度地图API,假设是协同开发,就须要全部Eclipse使用同一keystore. 例如以下图所看到的: 这里须要注意 ...

  5. 菜鸟译文(二)——使用Java泛型构造模板方法模式

    如果你发现你有很多重复的代码,你可能会考虑用模板方法消除容易出错的重复代码.这里有一个例子:下面的两个类,完成了几乎相同的功能: 实例化并初始化一个Reader来读取CSV文件: 读取每一行并解析: ...

  6. 支付宝对账单下载Java正式商户调用

    package code; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; impo ...

  7. u3d中的坐标系

    任何子级游戏对象 (Child GameObject) 的检视器 (Inspector) 中的变换 (Transform) 值都会相对于父级 (Parent) 的变换 (Transform) 值而显示 ...

  8. 使用flume将kafka数据sink到HBase【转】

    1. hbase sink介绍 1.1 HbaseSink 1.2 AsyncHbaseSink 2. 配置flume 3. 运行测试flume 4. 使用RegexHbaseEventSeriali ...

  9. 【Android】输入设备配置文件(.idc文件)

    何为idc idc(Input Device Configuration)为输入设备配置文件,它包含设备具体的配置属性,这些属性影响输入设备的行为. 对于touch screen设备,总是需要一个id ...

  10. 【Qt】qt库结构及示例

    QT库结构 Qt图形库是一个组织严谨的C++类库,其结构如图所示 细说Qt库 Qt类库中包含了上百个类,结构十分复杂,上图展示了Qt_3.2类库的基本结构. Qt类库中的类可以分成两种类型: 一种是直 ...