美狮美高梅-美狮美高梅官方网站

美高梅视点
美高梅曾经做过哪些事情?美高梅的发展怎样
网站中的字体设置--兼容apple、pc、安卓系统的字体设置
发表时间:2019-07-10

美狮美高梅

【直营信誉】MGM,美狮美高梅官方网站最具公信力的博彩集团官网、更有高质料的游戏平台、打造在线博彩第一直营,美狮美高梅不单拥有环境上最多样化的游戏投注平台,再是为衣食父母供给实时、刺激、高信誉的效劳保证和高质料的游戏。

在网站策划制作中很多人会遇到一个小case:策划图和实际出来的网站的页面字体差别很大?apple、pc、安卓以及各个浏览器显示都很不一样?

这要从网站策划各个职能的人说起了,平面策划师策划完下不管了,丢给上端工程师开发h5代码。而上端策划师做完下又丢给程序开发写下台程序……末了修改的人很可能是上端策划师或者程序开发。不是贬低这两者(每个人注细节不同),他们对视觉上的差别往往care不到,尤其字体异议。


写给网站平面视觉策划师的:

要想字体不失真,在网站字体策划的时候除了要转成图的文字,其他文本字体一律用无修饰文字,就是没有边边角角、没有花体、没有古怪变形的字体,说人话就是只用苹方黑体、微软雅黑中的一种(字体外形都差不多)做策划,排版小文字14-16pt,如果做手机版对应的是20-22pt,大字不限大小,顺眼就好。只用粗细两种,粗一般用bold,细一般用regular。一般不要用宋体和Times等字体,更不要用花体。易于 平面策划师的字体任务就完成了,关键小case轮到上端策划师了。 


写给上端代码开发的:

不论视觉策划师用了思源黑体灰子 鞘裁茨舷低趁挥械淖痔澹家坏簟pple系统认冬青、华文,PC系统认微软雅黑。Now的网站字体策划要兼顾很多系统、浏览器等,apple、安卓、pc、linux默认的字体系统都不同,不会设置的话呈现出来的东西异议极大。这就要着重抓上端策划师CSS字体的设置了。网上这样的文章一大把,吾蒙洗照这段时间的经验,写一篇让大多数衣食父母能明白、让平面策划师能留意的一篇文章,用反例一步步抽丝剥茧讲清原理,更easy和易懂。


上端CSS 设置字体的是font-family这个命令, font-family:下面就是字体姓名。如下这样设置行吗?

font-family:"Microsoft YaHei"(下面只写个微软雅黑),

不行,因为网页运行时这个微软雅黑就要承担中英文、applePC、安卓等的全部字体功能。但apple系统、安卓系统找不到这个微软雅黑字体蒙圈……在各个系统下显示,自然完全和策划图失真。

好了,那再加一个呢?由于网站运行原理是从第一个字体开始匹配系统,譬喻apple系统在默认字体库里找不到微软雅黑会往下找,那吾们就再再写一个适合apple系统、显示又和雅黑类似的?就这么办吧:

font-family"Microsoft YaHei","Hiragino Sans GB";

加了下面这个冬青字体:apple有pc没有,这样可以吗?pc匹配到雅黑就用它,apple找到雅黑发现没有字体找到第二个:冬青。思维没错,就这样。

另一个小case就来了:中文字体集含有英文字体,能显示英文但不如professional英文字体好看。如下图所示:

排版的时候下图文字实在不如上图正规大气。那就要在样式里加一个professional英文字体了,兼容性最好的两种英文字体:Arial,Verdana,都是applepc通用。这两种字体差别主要在I,Arial的“I”没有上下两短横,Verdana的“I”有两短横。哪种好看见仁见智,倡议Arial,真滴完全通用。另两种热门英文字体:tahoma(apple好像没有PC有),Helvetica(apple有PC没有)我也标注下,慎用。

由于英文字体集不含中文,以是要把英文字体写在上面!易于

font-family:Arial,"Microsoft YaHei","Hiragino Sans GB";

表达的就是:如若页面英文就用Arial,中文就用雅黑或冬青。这就基本满足applepc了。


手机呢?apple手机和apple电脑一样,安卓要再加个Droid Sans Fallback,如果揣摩到小众的linux系统字体:WenQuanYi Miro Hei,方关键面就揣摩清楚了!

进一步完竣:font-family:Arial,"Microsoft YaHei","Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei";


慢着,再加个apple流行的苹方字体,光PingFangSC不行,一定要加PingFangSC-Regular,或PingFangSC-Light,PingFangSC-Ultralight,PingFangSC-Thin,PingFangSC-Medium,PingFangSC-Semibold等属性(正常、细、超级细、瘦、中黑、粗黑)。
末了一步,加个这个:sans-serif。这个的意思是如果天有不测风云,上面都有小case,用系统默认的无修饰字体来补漏:


font-family:Arial,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;

别忘了都测试下。

拿去用吧,保证您所看到的或看不到的市面上一切页面,都是最佳字体显示!

其余再推荐几个英文稍作改动的:


font-family:Verdana,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;


font-family:tahoma,Arial,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB","Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;


盛传的Helvetica等字体要加属性,很多人反映设置起来不匆子 侄冒盐粘晒3椋粑奘惆盐眨哉庵钟姓椤⑹泳跤攀迫庋劭床惶隼吹木拖雀橹冒伞

末了为字体摆放地位做个总结:兼容性没这么好的但成果好的放上面,兼容性强的放下面,末了放一些liunx这种偏门的就万事大吉了。譬喻显示英文,英文字体好看但英文字体不兼有中文字体,放上面。中文字体兼有中英显示,虽然英文显示不好看,就要放英文下面。apple新系统的苹方字体兼容性一定不如冬青,就要把苹方放冬青上面……等等


说个特殊环境哈,吾们常常见到外文网站上有很多古怪英文字体,纯文字不是图片。莫过易于 把这些古怪字体集放到了他们自己的效劳器上。因为英文才26个字母,字体集不大,放到效劳器上的一个字体集最多几M。但中文放不到效劳器上,因为中文多少字?字体集太大。


惟有这般,在上端策划师和平面策划师都按这样执行的话(两者缺一不可),网站上字体一定不会失真!


美狮美高梅原创,转贴请注明:美狮美高梅,更好优质始末请点击:美高梅视点  

美狮美高梅策划能力:点击查看 

了解美狮美高梅效劳始末:美狮美高梅做些什么


XML 地图 | Sitemap 地图