标签: typography

换句话说,如何忽略角色的深度和上升而不是基于其边界框将其垂直放置在周围的框中？

这是一个最小的html示例:

.box {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  border: 1px solid black;
  text-align: center;
}

<span class="box">?</span>
<span class="box">,</span>
<span class="box">`</span>

它产生以下内容:

如何更改它以产生以下内容？

CSS解决方案如果存在则是首选,但Javascript作为最后的手段是可以接受的.我正在寻找一个通用的解决方案,而不仅仅是图中的三个字符.我的页面中会有很多这样的框,所以性能(如果使用Javascript)很重要.

为了进一步澄清事情,我将在LaTeX中执行此操作:

\newlength{\desiredboxsize}
\setlength{\desiredboxsize}{1em}
\newcommand*{\centercharinbox}[1]{%
  % Force width
  \makebox[\desiredboxsize]{%
    % Force height and center vertically
    \raisebox{\dimexpr .5\desiredboxsize - .5\height \relax}[\desiredboxsize][0pt]{%
      % Cancel depth
      \raisebox{\depth}{#1}}}}

是否可以使用CSS更改特定字符的大小？

例如,在我正在使用的段落中font-face: Arial; font-size: 12pt;.我希望只有字母"a"出现在10号.

有没有办法做到这一点？

谢谢.

我想要的是采用填充矩形并使用其他形状在其中打孔.这正是为此NSBezierPath而设计的那种东西.您添加一个矩形路径,然后添加将"穿"它的子路径,最后填充它.在我的例子中,子路径实际上是文本.没问题,效果很好:

除非我使用Helvetica Neue Bold作为我的字体.当我使用它时,我最终得到一个没有任何文字的纯蓝色矩形.但是子路径确实在绘制 - 实际上,如果我将填充的矩形缩小一点,您实际上可以看到一些文本路径:

我和Helvetica Neue Italic的行为相同.Helvetica Neue Medium的工作正常,Helvetica Bold,Times New Roman Bold和Arial Bold也是如此.

我已经尝试过使用NSEvenOddWindingRule和NSNonZeroWindingRule.(编辑:显然我并没有真正尝试过NSEvenOddWinding规则,因为事实上这确实可以起作用)

这是我在drawRect我的NSView子类的方法中使用的代码.

NSLayoutManager *layoutManger = [[[NSLayoutManager alloc] init] autorelease];
NSTextContainer *textContainer = [[[NSTextContainer alloc] 
      initWithContainerSize:NSMakeSize(300, 100)] autorelease];

NSFont *font = [NSFont fontWithName:@"Helvetica Neue Bold" size:100];

NSDictionary *textAttribs = [NSDictionary dictionaryWithObjectsAndKeys:
                         font, NSFontAttributeName, nil];

NSTextStorage *textStorage = [[[NSTextStorage alloc] initWithString:@"Hello" 
                                        attributes:textAttribs] autorelease];

[layoutManger addTextContainer:textContainer];
[layoutManger setTextStorage:textStorage];

NSRange glyphRange = [layoutManger glyphRangeForTextContainer:textContainer]; …

我正在开发一个以排版为导向的wordpress主题[1],我在线图像遇到了麻烦.

我可以控制每个元素并调整它的线高,底边距,ecc,以保持垂直节奏.但是,由于通过编辑器粘贴的图像可以具有任何高度,因此它们显然会破坏以下所有内容.

所以问题是,是否可以使用边距,填充,两者或其他解决方案,以确保独立于图像大小,它将调整到基线.

我知道有一些选择,比如让所有图像变成线高的倍数,这样我就可以保持节奏.其他选择是使用javascript,不理想,但如果没有css解决方案,我将不得不考虑它.

[1]正如你所看到的,这是一个与css相关的问题,而不是一个wordpress问题,这就是我在这里发布这个问题的原因.

我在构建网站时遇到了使用@ font-face的问题.字体安装在我的电脑上,我从fontsquirrel.com下载了它.

如果我使用我的PC(日志)中安装的版本,从以下屏幕截图中可以看到一切都很好:

http://www.valeriobulla.it/normal.jpg

但是,一旦我切换到@ font-face版本,字母'跟踪(特别是Ts)就不同了,看起来很破碎:

http://www.valeriobulla.it/error.jpg

这是@ font-face的代码(从font squirrel下载的font-face工具包):

@font-face {
font-family: 'JournalRegular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
     url('journal-webfont.woff') format('woff'),
     url('journal-webfont.ttf') format('truetype'),
     url('journal-webfont.svg#JournalRegular') format('svg');
font-weight: normal;
font-style: normal;
}

这是项目(div)样式:

#assignment-text {
font-family: Journal, JournalRegular, serif;
font-size: 3em;
text-align: center;
width: 340px;
position: absolute;
top: 200px;
left: 320px;
color: #000;
}

在我的电脑上使用Journal一切都很好.强制JournalRegular(通过评论期刊)打破间距.我在当地发展.测试:Windows 7 PC(安装了字体):Firefox 7,Chrome,Opera,IE9.Macbook(没有安装字体):Firefox,Safari.

这是一个已知的问题？我搜索过,但似乎无法找到解决方案.

我想使用Google Fonts目录中的字体集合.我选择了样式并link在项目模板中包含CSS 标记.

或者,使用谷歌字体,您也可以下载该集合,你得到的是一个包含所有字体样式的zip文件.

我可以创建一个与Google允许我在HTML中包含的CSS相当的CSS,因此如果访问者无法访问Google Font API,我想提供自托管字体文件作为后备.

如何设置此功能,并防止下载Google字体文件和自托管字体文件？如果用户可以访问Google字体,则浏览器不应下载该字体的自托管版本.

当我导出到HTML时,如何让Emacs组织模式创建正确的印刷标记,包括将直引号转换为智能引号("引号")并将连字符转换---为m-dashes —？

我需要在一个项目中显示几个字体样本的基线,x高度和上限高度的规则.我有基线和x高度照顾,但我很难得到一个通用的CSS规则,将在我应用规则的任何字体的上限高度绘制边框.我已经摆弄了线条高度,但是字体的字形与其布局框顶部之间的空间因字体而异,因此设置一次将不适用于任何字体.

此代码笔示例说明了此问题:http: //codepen.io/DrSpatula/pen/BAgqG

什么是iOS 8系统字体？

看起来它不再是Helvetica Neue,并且搜索不会产生任何确定iOS 8字体的确定结果 - 尽管有人猜测它是Apple定制的Myriad.

当我制作网页时，当确实不需要图像或 SVG 时，我喜欢使用 unicode 字符作为图标。这对我来说很容易，而且使页面变得更轻。通常，这种方法效果很好，只是我总是不得不摆弄偏移量以使其正确居中。

是的，是的，我知道这个：

.someDiv {\n   width: 10px;\n   height: 10px;\n   line-height: 10px;\n   text-align: center;\n}\n

但问题是大多数字形本身并不是垂直居中的。这意味着我最终会\xe2\x97\x8f在带有 CSS 的方形容器中垂直偏离中心：

有没有一种 CSS 方法可以使字形居中而不是字体的平均线居中？（或者任何技术上集中的内容。）