我有一个Photoshop模板，我想转换成一个网站。 我已经调整了容器的宽度，字体大小和内容，但问题是html页面与photoshop模板看起来不一样，尤其是文本对齐。 如果网页布局（文本流程）看起来与photoshop模板完全相同，那么有哪些css规则要遵循？
答案 0 :(得分：2)
这是一个非常好的列表，您可以使用css
进行文本处理http://www.w3schools.com/css/css_text.asp
http://www.w3schools.com/css/css_font.asp
自定义字体是一件棘手的事情，但它是文本外观/流程的一个因素。所有我想说的就是如果你有时间或者你真的必须......使用它们，否则标准字体是可以使用的。
Websafe字体：http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
字体松鼠：http://www.fontsquirrel.com/fontface/generator
Google网络字体：http://code.google.com/intl/fi-FI/apis/webfonts/
同时文字连字是一个因素，但有点与自定义字体属于同一类别..如果你有时间或者如果你真的必须......那就去吧。 （那里有jquery插件）
如果您正在与设计师合作，我会说您应该与设计师讨论自定义字体部分和连字符部分（或者如果他已经看过布局主张或者他是否坚持有关文本流的话，可能也会讨论客户端。）然后去寻找间距和缩进以及线高等等，或以适合你的顺序。
如果它是一个工作的东西..它可能不是.. idk。
我也喜欢Willoller所说的，但我的版本是：
确实如此，它并不总是一成不变的，你必须100％复制所有内容，就像它们在布局图像中给你一样。
这是由于几件事情： 有时设计师可能不会考虑有关文本广告和广告的事情。我的意思是一般。就像，他们只是放置文本来展示文本来到这里，而不是过多考虑大小或颜色，或者它有连字符，或者它有阴影......或其他东西。
有时，设计师可能甚至不知道有一些限制或事情或多或少难以进入互联网。 （自定义字体，连字符，文字阴影。也许是我忘记的东西。）
另外，有些东西在Web浏览器中看起来不一样（并且在所有浏览器中都是一样的），因为它可能在您的布局图像中，例如抗锯齿，当您使用photoshop进行布局时，这通常与文本一起使用它使文本看起来更柔和。
将它解释为对文本的解释，不要为了细节而烦恼，通常可以协商更大的细节。
编辑：另外我想指出，对于文本的全部狂暴并不一定是件好事，因为它在设计中。
可读性是一个重要因素，有时候设计师会考虑它，有时也不会（有时他们真的不像我前面提到的那样专注于文本。）
有些网站使用超级spacy线高和/或大字母间距，我要感谢你和再见。
Edit2：以前写在凌晨4点左右。不得不把它清理一下。
答案 1 :(得分：1)
文本的各种属性在不同的操作系统和浏览器上看起来会有所不同 - 这是要记住的一件事。也就是说，您可以使用“字母间距”（http://www.htmlref.com/reference/appb/css_letter-spacing.htm）和“字间距”（http://www.htmlref.com/reference/appb/css_word-spacing.htm）来获得一些控制权。请谨慎使用“text-align：justify”（http://www.htmlref.com/reference/appb/css_text-align.htm）。实际上，请谨慎使用所有这些 - 看看它在clearType关闭的Windows上看起来如何，你可能会感到震惊。
我倾向于让浏览器做自己的事情而不是过度控制文本，但这取决于你所依赖的浏览器支持程度。
答案 2 :(得分：0)
这真的是一个手动过程。该文本在设计中看起来永远不会与浏览器相同。您只需要查看设计和浏览器并调整值以使它们尽可能接近。
答案 3 :(得分：0)
我倾向于使用.psd文件作为松散的模板，而不是将它们翻译成HTML和CSS时的精确匹配。很容易挂断确切的字体匹配（并且通常选择字体配对）。但是，更重要的是网站渲染得很好，可读性和易用性，它看起来与.psd完全相同，并且在每个浏览器中渲染完全相同。
这可能意味着该网站在Chrome中与在Firefox或Opera中看起来略有不同（并且忘记了IE6），并且它们看起来与.psd完全不同。只要设计精良，优雅地降低并为游客提供价值，细微差别并不重要。