一个纯英文的站点，需要面向ipad、mac、linux、window、android 的话，应该怎么写font-family？

25 条回复 • 1970-01-01 08:00:00 +08:00

1

lingyired

OP

2012-12-14 15:19:39 +08:00

1

现在没写font-family，发现在不同终端的表现不同

2

gucheen

2012-12-14 15:35:52 +08:00

不写就是浏览器默认设置了，用一些各系统通用字体，通用度高的写前面，低的写后面，针对不同系统用不同样式也许

3

lingyired

OP

2012-12-14 15:39:19 +08:00

@gucheen 有例子或者相关文章么

4

gucheen

2012-12-14 15:45:12 +08:00

http://www.w3schools.com/cssref/css_websafe_fonts.asp
w3c上给出的推荐组合

5

lianghai

2012-12-14 16:19:30 +08:00

你具体要什么样的字体风格？
是 Helvetica/Arial 风格还是 Verdana 风格还是 Georgia 风格？
另外，各个平台自带的字体并不一致，而且字体渲染风格不同，你不可能保证「在不同终端的表现」相同。

Linux 各发行版的字体很乱，不建议考虑太多。

@gucheen: W3schools 和 W3C 半点关系都没有，不要误导别人。而且他们给的推荐组合一塌糊涂。

6

lingyired

OP

2012-12-14 17:45:57 +08:00

@lianghai 没有具体的风格，只需要正常即可了。

Linux 的话，目前只考虑ubuntu

7

hanai

2012-12-14 19:29:27 +08:00

How about Google web fonts?
http://www.google.com/webfonts

8

Muninn

2012-12-14 19:38:13 +08:00

google那个国内没法用会把网页卡好久

9

kingwkb

2012-12-14 19:58:52 +08:00

@lingyired openSUSE也是必须的啊

10

gucheen

2012-12-14 21:16:22 +08:00

@lianghai 与w3c无关倒是知道，回帖疏忽了，不过它推荐的字体不好不了解，受教

11

alexrezit

2012-12-14 21:23:34 +08:00

中英日韩:
font-family: 'Lucida Grande', Calibri, Trebuchet MS, Helvetica, Arial, Hiragino Sans GB, WenQuanYi Micro Hei, STHeiti, Microsoft Jhenghei, sans-serif !important;

Emoji:
emoji {
font-family: Apple Color Emoji;
}

等宽:
font-family: Menlo, Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

12

lianghai

2012-12-14 23:46:42 +08:00

@lingyired: 正常即可？各平台默认的字体就很正常啊，所以理论上你只用写 font-family: sans-serif; 就够了。不过为了规避 Chrome 等浏览器的字体策略失误，最好写成这样：
font-family: "Helvetica Neue", Arial, sans-serif;

上面这个写法能尽量发挥 OS X 和 iOS 高质量的 Helvetica Neue，不过可能会引起极少数在 Windows 上乱装 Helvetica Neue 的人的电脑上字体显示不清晰。
所以你可以考虑更 robust 的写法，让 OS X 和 iOS 都用不那么好看但迁就 Windows 的 Arial：
font-family: Arial, sans-serif;

如果更喜欢 Verdana，那就改成：font-family: Verdana, sans-serif;
如果更喜欢 Georgia，那就改成：font-family: Georgia, serif;

@alexrezit 给的那一坨完全就是在胡言乱语。

13

alexrezit

2012-12-14 23:51:06 +08:00

@lianghai 为什么是胡言乱语? 如果要批评别人, 最起码请解释一下.

14

lianghai

2012-12-14 23:58:19 +08:00

@alexrezit: 凡是有能力讨论 font-family 的人一眼就能看出来「font-family: 'Lucida Grande', Calibri, Trebuchet MS, Helvetica, Arial, Hiragino Sans GB, WenQuanYi Micro Hei, STHeiti, Microsoft Jhenghei, sans-serif !important;」有多荒谬。所以我没必要解释，只需要告知楼主可以忽略你给出的信息。
我倒是想听你说说，你自己连这段 font-family 有多么混乱都看不出来，为什么还有自信来误导别人。
别的不说，最最基本的一点，「一个纯英文的站点」为什么需要在 font-family 里写4款中文字体？你能解释一下吗？

15

alexrezit

2012-12-15 00:01:57 +08:00

@lianghai 我只是用了别人的 fallback 感觉效果还可以于是贴上来. 我承认自己不懂, 求解释一下, 谢谢指教.

16

lianghai

2012-12-15 00:10:34 +08:00

@alexrezit: 我已经说了那段 font-family 是胡言乱语了。「胡言乱语」还能怎么解释？一个疯子在那儿胡言乱语你能怎么解释？
遇到一些奇怪的 font-family 写法时我顶多也就能费劲揣测一下作者半懂不懂的考量。但你复制过来的这段从格式不一致（引号时有时无）就能看出来是东拼西凑的，所以我实在不想试图解读了，没有意义。

17

alexrezit

2012-12-15 00:14:31 +08:00

@lianghai 那有没有什么好的写法推荐呢?

18

lianghai

2012-12-15 00:17:17 +08:00

@alexrezit: 针对楼主的推荐我已经写了。我不知道你的需求，不知道该推荐什么。

19

deepure

2012-12-15 00:19:01 +08:00

font-family: Arial, sans-serif;建议楼主先用这个来做吧，等自己慢慢熟悉或者体会到其它字体的在各平台的异同，再来根据自己的喜好做调整。
@alexrezit 你那一段确实不适宜推荐给别人使用：）

20

Keinez

2012-12-15 00:42:48 +08:00

Font-family怎么写，推荐了解一下渐进增强相关的东西。

读物推荐《无懈可击的Web设计II》

http://book.douban.com/subject/4935289/

21

leecade

2012-12-15 01:04:06 +08:00

font-family: "Helvetica Neue", Arial, sans-serif;

靠谱

22

lingyired

OP

2012-12-15 09:41:42 +08:00

@lianghai
@alexrezit
@deepure
@Keinez
@leecade 感谢各位！下周回去尝试

23

Ziya

2012-12-15 17:47:32 +08:00

@lianghai 如果是中文站点，该如何写比较好呢？
对多平台设备的字体一直很头疼
谢谢

24

lianghai

2012-12-16 20:11:19 +08:00

2

@Ziya: 可以参考这个： http://www.zhihu.com/question/19911793/answer/13329819

25

lingyired

OP

2012-12-17 14:07:02 +08:00

@lianghai Thanks