标签: typography

它可以是库依赖的或不可知的.我只是想知道一个脚本是否存在将分析页面(或者可能是某些节点已经给出)和......"保护"文本中的寡妇和孤儿.

"保护"是什么意思？我不知道.我考虑过看看自己是否可以拿出一个,但部分问题是我甚至不确定如何去做.

澄清:这将是网站的屏幕版本,而不是打印.

我想创建一个类似于标签的文本样式.看这里:

我几乎只能用它来做:http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

但是,我想添加一些填充.当我这样做的时候,事情会走下坡路.如果我添加边框也会发生同样的情况:http://jsfiddle.net/JN72d/

有什么想法可以通过简单的方法实现这种效果吗？

我不是设计师,我无法理解,我喜欢代码和代码一直是我的生活.

对于非设计师来说,排版是一个巨大的7头蛇,我想知道,如果有什么我可以做的,使我的排版更好.

这就是我能做的:

女巫只不过是蓝图CSS和

h1 {
    font-size: 2em;
}

但我讨厌Arial字体上的别名,下面是300%缩放的上面图像的一部分

从开发人员方面来说,我可以做些什么来使我的网页看起来更好？

我试过font-smooth: always;但没有任何运气.

我试过用:

• CSS3中的文本溢出省略号功能(但不支持多行)
• 几个jquery插件,如dotdotdot(http://dotdotdot.frebsite.nl/)
• jquery autoellipsis(http://pvdspek.github.com/jquery.autoellipsis/).

所有这些工具都能很好地工作,但如果内容有图像,则使用dotdotdot或jquery.autoellipsis进行截断的计算高度是错误的.

我只是想知道是否有人有一个很好的想法处理这个(可能是一些服务器端处理？),谢谢提前:-).

我编译了这个jsFiddle演示,以便你可以看到我要扔的东西.使用Twitter Bootstrap 2我认为一切都很好,简单的事情都得到了照顾,直到我用这个.我不明白标记是不正确的还是库没有处理这个但是文本很长时间只是溢出屏幕/容器

的jsfiddle

http://jsfiddle.net/kSCa3/2/

我知道如何使用CSS将文本旋转90度,但我试图将文本与页面的右上角(或父元素)对齐为90度旋转的自我.这可能吗？

例:

我有以下格式的自定义字体(使用filesize):

font.eot(66kb)

font.svg(204kb)

font.afm(79kb)

font.otf(107kb)

font.woff(42kb)

font.pfb(130kb)

font.ttf(66kb)

因此,完全相同的字体具有完全不同的文件大小,具体取决于格式..woff的尺寸最小.

根据w3school上的@font-face页面,EOT适用于IE6 +,而其他格式适用于IE9 + - 除此之外,我找不到任何有关这些格式之间差异的信息.

我的问题是,在质量或兼容性选择哪种格式方面有什么不同吗？

为了设计我喜欢在标题中使用非常大的字体(大约70 - 85像素)为了防止这个页面压倒我需要一个非常薄的字体.我在谷歌字体上找到了Poiret One,它被归类为草书家族.它是一种非常轻薄,非常优雅的字体,但草书系列中的默认字体似乎是相反的 - 在大标题中非常笨重,大胆且没有吸引力.在我的css文件中,我有:

h1 {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  font-size: 85px;
  color: #99ccff;
}

我想添加courier new作为用户默认字体,因为它是最安全的Web安全字体并添加以下属性以使字符间距类似于Poiret One,这样我就不会溢出我的引导列:

font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;

如果用户无法查看Poiret One,我可以使用什么来告诉浏览器,请使用上面给出的字体修改的courier new？

期待一个解决方案.谢谢!

我正在使用 Compass/SCSS 和垂直节奏方法开发 HTML 页面。我已经为段落和标题以 rem 单位设置了基线和指定高度。它效果很好，并且很好地放置在垂直节奏网格上。但是，我有一个中央图像，它占据了列的 100% 宽度（我希望它具有响应性并随浏览器窗口缩放）。

问题是这个图像打破了垂直节奏，因为它的高度是根据浏览器宽度和图像纵横比动态计算的，并且不尊重基线。

我该如何处理这种情况才能拥有完美的垂直节奏？

这是演示该想法的屏幕截图：

如您所见，图像下方的文本脱离了 VR 网格。

我尝试使用Respond.js jQuery 插件，但看起来它已经过时并且无法正常工作。

我正在尝试使用 text-shadow 此处的CSS属性为文本添加大纲。
问题是阴影角并不总是相遇。如果你往下看，你可以在 Y 的右上角看到问题。
使用这种字体看起来还不错，但对于我的代码使用的一些字体，它会产生很大的不同。

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -1px  1px #ff0000, 
    -1px -1px #ff0000, 
     1px  1px #ff0000, 
     1px -1px #ff0000, 
    -2px  2px #ff0000, 
    -2px -2px #ff0000, 
     2px  2px #ff0000, 
     2px -2px #ff0000;
  -webkit-font-smoothing: antialiased;
}

<div class="shadowOutline">My</div>