标签: typography

我遇到了一个问题 - 在IE9标准模式下 - IE9以这样的方式呈现文本,即降序字母上的尾部 - "q,p,y"等 - 消失.尝试过使用填充和其他常见的CSS设置来帮助解决这个问题,但到目前为止我没有运气.

谁知道这可能是什么？

好吧,我有以下问题:我需要一个动态解决方案(不知道文本,产生字体大小等),以典型地正确对齐一个下降帽.正确的意思是:下降帽的帽高度线应与段落的帽高度线相同.

例如:ZŽẐ应该都与它们的上部水平条对齐.虽然我已经看到了这个问题的一些(错误的)解决方案(它们对齐整体高度因此看起来很糟糕,有重音,dieresis等),我没有看到任何正确的解决方案.

有人知道吗？

PS:它可以工作,如果我找到一些方法来一致地将dropcap的基线与段落的第二行的基线对齐,因为从那里可以使用font-size的%-modifier完成.不幸的是,我也不知道如何归档这个.

这是一个可以玩的东西:

p.cap {
    text-indent: 0;
    font-size: 125%;
    line-height: 125%;
    text-align: justify;
}

p.cap:first-letter {
    display: inline-block;
    float: left;
    font-size: 230%;
}

http://jsfiddle.net/s856R/

我有一个复杂的js函数,其中我实际上需要了解像素字体大小占用多少空间.

我注意到某些字体的大小因字体而异.

如何计算字体的大小？如果它设置为12px,在CSS中,是什么12px意思？那那么12px宽吗？高？还是对角线像素测量？

我能做些什么来使文字看起来像小盘/资本吗？如下所述:http://en.wikipedia.org/wiki/Small_caps.我使用了转换器,但缺少一些字符.

在Google的新材料设计文档中,可以找到关于排版的文章.在这些规范中,有一个关于"大型和动态类型"的简短部分.

有谁知道这应该如何实施？我希望在网上或源代码中找到更多细节,但找不到任何指针.任何帮助将不胜感激.

我想在pdfLaTeX中找到一种方法来生成滴帽(大的初始字母高几行).我知道有一个dropping包与latex+一起使用时效果很好dvips.但是,与pdflatex结果一起使用时看起来很难看.

我的源文件是:

\documentclass[12pt]{article}

% for pdflatex file.tex # dropping is ugly
% \usepackage[pdftex]{graphicx}
% \usepackage[pdftex]{dropping}

% for latex file.tex ; dvips -T 12cm,8cm file.dvi # dropping is OK
\usepackage[dvips]{graphicx}
\usepackage{dropping}

\usepackage[papersize={12cm,8cm},
    left=0.5cm,right=0.5cm,
    top=0.5cm,bottom=0.5cm]{geometry}

\begin{document}
\dropping[-3pt]{3}{W}ith a drop cap, the initial sits within the margins and
runs several lines deep into the paragraph, pushing some normal-sized text off
these lines. This keeps the left and top margins of the paragraph flush.
In~modern browsers, …

在句子之间呈现应该出现的额外间距的最佳方法是什么(使用[X] HTML + CSS)？

<p>Lorem ipsum.  Dolor sit amet.</p>
               ^^ wider than word spacing

由于HTML和XML都需要空格折叠,因此上述两个空格必须表现为单个空格.

有什么选择？下面有一些明显的,其他的存在？(CSS3中的任何内容？)这些都存在哪些缺点,包括不同的浏览器？(下面的不间断空格如何与换行相互作用？)

• ..ipsum.  Dolor..
• ..ipsum.  Dolor..
• ..ipsum.  Dolor..

网上有很多FUD声称这是为打字机发明的,但你可以在诸如美国独立宣言等文件中看到它.(是的,我知道你不应该遵循两百多年前的所有惯例,DoI只是一个方便的例子,显示这种早期的打字机和等宽字体.)或者一位印刷工作者声称额外的空间让人分心 - 改变之后背景颜色所以示例不能是其他任何东西!

说白了,虽然我很欣赏有关是否应该使用额外间距的意见和讨论(这与编程无关),这不是我所要求的.假设这是一个要求,实现它的最佳方法是什么？

我在Bootstrap 中找不到任何用于更改字体大小的实用程序类。有用于边距和填充等的实用程序类。 有用于标题的显示类和用于段落的前导类，但是有什么方法可以使用 html 中的实用程序类使特定的文本片段变大和变小，而不必添加一些CSS？

我发现在将通用模式抽象为自定义 css 之前，使用尽可能多的实用程序类来快速模拟设计会更容易。

我已经梳理了 Bootstrap Text Utilities docs和Typography docs，但找不到任何东西。我错过了什么还是 Bootstrap 中不存在？这看起来像是引导将提供报价，在加入了类名称等，以改变文字大小的能力t-1，t-2，t-3，t-4，等。

我不是在谈论响应式排版，只是使用实用程序类更改默认字体大小而不是编写 css。

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

这是一个最小的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}}}}

我有奇怪的间距问题.有数字和每个文本平行.并且在1,4,7和"每个"文本之间存在不同的间距.我们如何解决这个问题,或者无法修复.我没有使用任何间距和额外的CSS属性.

@import url('https://fonts.googleapis.com/css?family=Spectral');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral');

.bigger {
  font-size: 40px;
}

p {
  font-family: 'Open Sans', sans-serif;
}

<p>
  <span class="bigger">81</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">84</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">87</span>
  <small>each</small>
</p> <br>