Skip to content

Instantly share code, notes, and snippets.

@kejun
Created May 13, 2013 07:14
Show Gist options
  • Save kejun/5566638 to your computer and use it in GitHub Desktop.
Save kejun/5566638 to your computer and use it in GitHub Desktop.
一个普通英文半角空格的宽度
body {
margin: 0;
padding: 0 24px;
font-family: arial, sans-serif;
background-color: #0ff;
background-image: linear-gradient(90deg, transparent 1px, rgba(255,255,255,.9) 1px);
background-size: 5px 5px;
}
hr {
border: none;margin:1em 0;
}
p {
font-size: 12px;
margin:0;
}
h1, h2 {
margin: 20px 0;
font-size: 12px;
color: #00b;
font-weight: normal;
}
ul {
margin: 0 0 20px 0;
padding:0;
}
li {
text-align: left;
list-style: none;
}
/*
一个普通英文半角空格的宽度
根据排版在1/5~1/3em(0.2~0.33)之间变化。0.31是个经验值。
*/
.space-width {
letter-spacing:.31em;
}
@-moz-document url-prefix() {
.space-width {
letter-spacing:.28em;
}
}
#sample1 {
font-size: 12px;
}
#sample2{
font-size: 14px;
}
#sample4{
font-size: 18px;
}
#sample5{
font-size: 24px;
}
<h2>EM空格、EN空格、THIN空格宽度</h2>
<p>D&emsp;O&emsp;U&emsp;B&emsp;A&emsp;N
<p style="letter-spacing:1em">DOUBAN
<hr>
<p>D&ensp;O&ensp;U&ensp;B&ensp;A&ensp;N
<p style="letter-spacing:.5em">DOUBAN
<hr>
<p>D&nbsp;O&nbsp;U&nbsp;B&nbsp;A&nbsp;N
<p style="letter-spacing:0.31em;">DOUBAN
<hr>
<p>D&thinsp;O&thinsp;U&thinsp;B&thinsp;A&thinsp;N
<p style="letter-spacing:0.2em;">DOUBAN
<h2>英文半角空格宽度:
根据排版在1/5~1/3em(0.2~0.33)之间变化。0.31是个经验值(Firefox, Mobile Safari空格偏大)。
</h2>
<ul id="sample1">
<li>1 2 , a b c M M M . 田 田 田
<li class="space-width">12,abcMMM.田田田
</ul>
<ul id="sample2">
<li>1 4 , a b c M M M . 田 田 田
<li class="space-width">14,abcMMM.田田田
</ul>
<ul id="sample3">
<li>1 6 , a b c M M M . 田 田 田
<li class="space-width">16,abcMMM.田田田
</ul>
<ul id="sample4">
<li>1 8 , a b c M M M . 田 田 田
<li class="space-width">18,abcMMM.田田田
</ul>
<ul id="sample5">
<li>2 4 , a b c M M M . 田 田 田
<li class="space-width">24,abcMMM.田田田
</ul>
<h2>UNICODE标准中有20种空格</h2>
<a href="http://www.cs.tut.fi/~jkorpela/chars/spaces.html" target="_blank">http://www.cs.tut.fi/~jkorpela/chars/spaces.html</a>
// alert('Hello world!');
{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment