Skip to content

Commit e6befd0

Browse files
zhoonzhoon
committed
new artical
1 parent b181a2c commit e6befd0

File tree

11 files changed

+115
-136
lines changed

11 files changed

+115
-136
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎_posts/2013-09-12-font-and-lineheight.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
layout: post
3+
title: 当line-height遇到不同的字体
4+
category: HTML&CSS
5+
---
6+
7+
做前端的，对Web界面都很敏感，大到页面的布局，小到一个像素错位，都抠的很紧。
8+
9+
这几天就遇到这样的一个问题，我在做一套公用的按钮样式，有一些按钮的规格是22px的高度，按照往常的写法，只要写height:22px;line-height:22px;就万事大吉了。因为以前都是做一些外包项目，所以没有每个像素都抠的那么紧，但是现在不同了，你的一个小小的按钮将要被上千万甚至上亿的用于看到，而且是在各式各样的系统和浏览器上。所以当我按照以前的思路做完一套按钮之后，在chrome下看是挺完美的，但是当我用IE各个版本看，甚至用Mac下的同个浏览器看，表现都是各式各样，我和我的小伙伴都惊呆了！经过我在各个浏览器下以及不同系统下的测试，大概可以总结一下几点：
10+
11+
中英文都走同一种字体的情况下：
12+
-----
13+
14+
在现有的字体中，有些字体只支持英文，有些字体只支持中文，有些字体是某些操作系统专有的，各式各样的字体都有。这里的第一种情况我们要讨论的是我们使用了一种支持中英文的字体。比如说宋体、微软雅黑等字体，使用这种字体的话，如果你的有中文或者英文的话，那么在一般的浏览器上，只需要设置和height一样的行高就可以实现居中了。
15+
16+
中英文走不同的字体的情况下：
17+
-----
18+
19+
在中英文混合的情况下，出了IE，其他浏览器都基本和中英文走同一种字体是一样的。因为不同字体对待line-height的情况不同，所以中英文混合的时候，整体的line-height就会出现异常，这种异常我暂时还找不到规律（而且很好奇为什么chrome下不会有这种异常）。解解决办法：先把中英文字体设置为同一种字体，再调整各个浏览器的兼容性。

‎_posts/2013-12-31-welcome-2014.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
layout: post
3+
title: 2013这一年
4+
category: 其他
5+
---
6+
7+
8+
没想到2013的最后一天，我会病殃殃的坐在床头写这个总结（这两个星期被感冒折磨死了）。每到年末，都会看到各种人搞一篇年末总结，来总结这一年的一些得失和想法。之前我是基本没有写过年末总结的，但是今年对我来说还是重要的转折点，所以需要写点什么来记录以下经历和想法，相比去外面倒数什么的，有意义多了。今年我的总结的关键字很简单：毕业、入职、改变。
9+
10+
##毕业
11+
毕业是一个离别的季节，不仅是相处了几年的同学将要各奔东西，而且要告别十几年的校园生活。但是对于我来说，最大的冲击不是这两件事，而是未知的将来。为什么这么说呢，我这个人比较依赖熟悉的环境，如果要离开依赖了四年的环境，那我会不知道接下来会发生什么事，该怎么解决，甚至会有对未知的恐惧。
12+
13+
毕业季嘛，肯定少不了做毕业设计，毕业旅游、各种串毕业照，毕业典礼阿，毕业聚餐阿之类的。
14+
15+
毕业设计的时候，是过完年回学校就开始做了，之前由于各种原因，一直拖拖拖。用了一个多月，三个人做了一个小游戏，把老师哄的还挺开心的，四月份的时候答辩也没想象中那么难，毕业设计也就这样算过关了。毕业旅游去了趟海南三亚，坐十几个小时的火车是件及其痛苦的事情，强烈建议不要坐这种事，然后，就没然后了，回来之后巨黑。到了四五月份，就是毕业照拉，跑了好几个朋友的毕业照，最大的收获就是：免费午餐拉，其实那个时候的毕业照纯属玩玩，根本感觉不到毕业的情绪，各种玩。到了毕业典礼，应该是六月份吧没记错的话，就稍微有些感觉拉，大家都拿起单反开始在校园里面各种留影纪念。离开宿舍的那一天，看到大家都拖着行李箱从眼前走过，告别、拥抱。那时候才真正意识到，原来这就是毕业。然后，我也拖上行李箱，上了车，沉默。
16+
17+
##入职
18+
七月份的时候，去深圳培训，那几天，吃好喝好，肥了10斤（暗爽）。回来之后，就正式入职了，真正开始了自己的职业生涯。
19+
20+
可能是由于实习了太长时间，刚入职的时候，我的心态还没有及时的更改过来。实习的时候，需求都是导师或者老大分配下来的，出现问题了就找导师帮忙解决，也就是说我是被动的接收需求，项目的负责人是导师，我只负责实现。后来才慢慢意识到，这中心态是不行的，特别是在跟导师和组长聊过之后，慢慢找到了问题。面对每个需求，不管是大需求还是小需求，不管你是不是这个需求的负责人，只要参与了，就要把自己当作负责人，不断的把项目往下推，要不然大家就会互相推卸责任，你等我我等你，浪费时间，降低效率。
21+
22+
这是入职以来最大的感觉和收获，看来要做一个合格的职业人，还需努力。
23+
24+
25+
##新年愿望
26+
2013是转折的一年，从校园走向职场。为了做一个合格的职业人，心态也在慢慢的发生改变。我们再也回不去学生时代的，没有了学校的依赖，没有了老师的依赖，身边也没有了天天一起玩耍的同学。反而，现在多了一份责任，工作上，生活上，甚至学习，都要自己对自己负责，对他人负责。2014年，首先希望自己和身边的人都健健康康的，然后工作学习生活都有更多的收获，有几个小目标：
27+
28+
1. 心态上进一步改变，做一个更好的职业人
29+
2. 前端知识不要落下了
30+
3. iOS能够更进一步的学习
31+
4. 多写写文章，分享一些东西
32+
5. 多些时间陪陪朋友，多关心一下家人
33+
34+
<br>
35+
最后，祝大家新年快乐！
36+
37+
2013年12月30日
38+

‎_site/2013/08/08/begin.html

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎_site/2013/08/09/first-post.html

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎_site/2013/08/12/second-post.html

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎_site/2013/08/19/newblog.html

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎_site/html&css/2013/09/12/font-and-lineheight.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<meta name="keyword" content="zhoon,zhoonchen,blog,front-end,iOS,life">
7+
<meta name="description" content="a blog of zhoonchen to share infomation of front-end, iOS and life.">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
9+
<title>当line-height遇到不同的字体</title>
10+
<link rel="stylesheet" type="text/css" href="/style/base.css" media="screen">
11+
<link rel="stylesheet" type="text/css" href="/style/page.css" media="screen">
12+
</head>
13+
<body>
14+
<!-- blog maim -->
15+
<div class="blog-main">
16+
<!-- blog content-->
17+
<div class="blog-content blog-post">
18+
<h1>当line-height遇到不同的字体</h1>
19+
<p class="date">2013年 09月 12日</p>
20+
<p>做前端的，对Web界面都很敏感，大到页面的布局，小到一个像素错位，都抠的很紧。</p>
21+
22+
<p>这几天就遇到这样的一个问题，我在做一套公用的按钮样式，有一些按钮的规格是22px的高度，按照往常的写法，只要写height:22px;line-height:22px;就万事大吉了。因为以前都是做一些外包项目，所以没有每个像素都抠的那么紧，但是现在不同了，你的一个小小的按钮将要被上千万甚至上亿的用于看到，而且是在各式各样的系统和浏览器上。所以当我按照以前的思路做完一套按钮之后，在chrome下看是挺完美的，但是当我用IE各个版本看，甚至用Mac下的同个浏览器看，表现都是各式各样，我和我的小伙伴都惊呆了！经过我在各个浏览器下以及不同系统下的测试，大概可以总结一下几点：</p>
23+
24+
<h2 id='id7'>中英文都走同一种字体的情况下：</h2>
25+
26+
<p>在现有的字体中，有些字体只支持英文，有些字体只支持中文，有些字体是某些操作系统专有的，各式各样的字体都有。这里的第一种情况我们要讨论的是我们使用了一种支持中英文的字体。比如说宋体、微软雅黑等字体，使用这种字体的话，如果你的有中文或者英文的话，那么在一般的浏览器上，只需要设置和height一样的行高就可以实现居中了。</p>
27+
28+
<h2 id='id8'>中英文走不同的字体的情况下：</h2>
29+
30+
<p>在中英文混合的情况下，出了IE，其他浏览器都基本和中英文走同一种字体是一样的。因为不同字体对待line-height的情况不同，所以中英文混合的时候，整体的line-height就会出现异常，这种异常我暂时还找不到规律（而且很好奇为什么chrome下不会有这种异常）。解解决办法：先把中英文字体设置为同一种字体，再调整各个浏览器的兼容性。</p>
31+
</div>
32+
<!-- blog sidebar-->
33+
<div class="blog-sidebar">
34+
<div class="blog-face-line"></div>
35+
<div class="blog-face">
36+
<a href="/">zhoonchen</a>
37+
</div>
38+
<div class="blog-name">zhoonchen</div>
39+
<div class="blog-info"></div>
40+
</div>
41+
42+
43+
<!-- blog footer -->
44+
<div class="blog-footer">
45+
<p class="blog-copyright">© 2013 – 2013 zhoonchen. Powered by <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> and host by <a href="https://github.com/zhoon" target="_blank">Github</a>.</p>
46+
</div>
47+
48+
</div>
49+
50+
51+
</body>
52+
</html>

‎_site/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
<div class="blog-content">
1818
<ul class="post-list">
1919

20+
<li>
21+
<a class="post-title" href="/html&css/2013/09/12/font-and-lineheight.html">当line-height遇到不同的字体</a>
22+
<span class="post-tag">&lt;HTML&CSS&gt;</span>
23+
<p class="post-date">12 Sep 2013</p>
24+
</li>
25+
2026
<li>
2127
<a class="post-title" href="/%E6%97%A0%E4%BA%8B%E5%90%90%E6%A7%BD/2013/09/11/work-and-play.html">认真地工作，认真地玩</a>
2228
<span class="post-tag">&lt;无事吐槽&gt;</span>

‎_site/js/mail.js

Whitespace-only changes.

0 commit comments

Comments
 (0)