怎样让字体在css里实现向ps里那样竖向显示

html-css044

怎样让字体在css里实现向ps里那样竖向显示,第1张

1、首先判断浏览器类型，IE浏览器中可以利用2种样式来控制。 一种是设置CSS样式为：writing-mode:tb-rl另一种是设置CSS样式为：layout-flow: vertical-ideographic但是这两种方法只适用于IE浏览器 2、为了兼容谷歌、火狐等各种浏览器

CSS即使设置了其他字体，也要看别的电脑里有没有，一般系统自带有宋体，黑体等字体，但是如果你电脑上有好看的字体，可以显示，在别的电脑没有你的字体，就显示不了，所以一般只会设置系统自带的字体。

设置方法：

<html>

<head>

<style type="text/css">

p.ziti{font-family:"Times New Roman",Georgia,Serif}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="ziti">要更改的字体内容</p>

</body>

</html>

CSS定义可以是：font-family:sans-serif

也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}

为什么我这里设置了三个，分别用","隔开呢，因为不同版本的操作系统，对字体的支持不同解释如下：

例如微软雅黑不同操作系统不同版本需要如下设置：

Windows XP及以前版本的Windows

font-family: Arial, 宋体, sans-serif

Windows Vista和Windows 7

font-family: 'Microsoft Yahei', sans-serif

Sorry，英文就无法设置字体了，因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。

Mac及其它操作系统

font-family: sans-serif

系统自带中文字体编码：

宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB2312FangSong_GB2312楷体_GB2312KaiTi_GB2312

不管你怎么设置都不能一样的，要一样的话可以，但必须PS里面字体效果设置无。

photoshop字体默认为平滑，也就是说字体边缘过度比较自然，不像网页排版时每个像素都很清晰，字体越大，锯齿形状就越明显。

上面字体，网页里可以使用黑体或是微软雅黑。懂排版的PS设计师，字体效果一般会调成无，那样排版的效果就和PS里的效果一致了。