标签: typography

我有以下替换功能

myString.replace(/\s\w(?=\s)/,"$1\xA0");

目的是采用单字母单词(例如介词)并在它们之后添加不间断的空格,而不是标准空间.

但是上面的$ 1变量对我不起作用.它插入文本"$ 1"而不是原始匹配字符串+ nbsp的一部分.

观察到的行为是什么原因？有没有其他方法可以实现它？

我在Canvas上绘制文字,并对抗锯齿的质量感到失望.据我所知,浏览器不会对Canvas上的文本进行亚像素消除.

这准确吗？

这在iPhone和Android上尤为明显,其中生成的文本不像其他DOM元素呈现的文本那样清晰.

有关高质量文本的任何建议都放在Canvas上吗？

茹贝尔

我在Windows计算机上遇到了@ font-face的问题(没有什么浏览器).它在linux和osx中运行正常.

这是我正在使用的css代码(使用font-squirel生成)

检查问题的屏幕截图..似乎有2个问题

• 在Windows上,字体是"跳舞".未在基线上对齐.
• 在Windows上,字体看起来没有消除锯齿.

有人有想法吗？提前致谢.

OSX和Linux中的屏幕截图:

http://j3rn.org/images/ob_font1.png

Windows中的屏幕截图:

http://j3rn.org/images/ob_font2.png

CSS代码

@font-face {
    font-family: 'SchulbuchNordFett';
    src: url(assets/fonts/schulbuchnord-fett-webfont.eot');
    src: url('assets/fonts/schulbuchnord-fett-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/schulbuchnord-fett-webfont.woff') format('woff'),
         url('assets/fonts/schulbuchnord-fett-webfont.ttf') format('truetype'),
         url('assets/fonts/schulbuchnord-fett-webfont.svg#SchulbuchNordFett') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

我遇到一些网站说

在前面的示例中,第1列具有固定宽度:它已设置为400 px宽.使用12 px的文本渲染,这将导致每行大约66个字符的度量.如果您的阅读器将文本大小增加到16像素,那么该度量将减少到每行50个字符.

第1列的CSS 是DIV#col1 { width:400px }

目前,我并不关心读者增加文本大小的情况.

我不明白他从哪里得到他的比率,但这个公式似乎考虑了他给出的两个比率:

approximate charcount per line = [2 * (div width)] / (font size)

公式中的单位是像素......

再往下他又举了两个例子,公式似乎仍然存在......

这个公式是否正确？他为什么要给出这些比率？

我以为之前有人问过这个,但也许我的搜索条件错误:)

今天有没有一种很好的方法可以在HTML/CSS中进行挂标点,因为浏览器没有实现该hanging-punctuation属性？

更新: JavaScript解决方案会很好,因为除了引用脚本的一行之外,它还能让我不要触摸我的html.

类似的东西,1)遍历所有p,span和blockquote.如果他们以",...,或者其他东西开头,那么调整间距.但我似乎无法弄清楚如何知道改变间距有多少,以及如何处理除第一个字符以外的任何内容元素中的行.

    var elements = document.querySelectorAll('p, span, blockquote');
console.log(elements);
var i = 0;
while (i < elements.length) {
  var el = elements[i];
  if (el.firstChild.nodeValue && el.firstChild.nodeValue.match(/^[".,']/)) {
    el.style.position = 'relative';
    el.style.left = '-.4em';
  }
  i += 1;
}

代码是一项正在进行中的工作......

我有这个文本框：

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

我希望能够包含段落，但输入的所有文本都打印在一行上。

文档表明这paragraph是默认的，false所以我必须将它设置为“true”。

我尝试了以下方法：

<Typography component="p" className={classes.text} paragraph="true">

我也试过：

<Typography component="p" className={classes.text} paragraph={true}>

两者都不起作用，所以我所有的文本仍然打印到一行。

如何让段落显示？

附加信息： 据我所知，Typography 中的段落={true} 属性只是为整个文本添加了一个下边距。IE 我的一个文本块是一个段落。如果我想要另一个段落，我将不得不添加另一个Typography. 就像是：

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text2}
</Typography>

这不正是我想要的。也许我的目标是让我的输入文本中的返回字符得到识别。这是正确的，如果是，它是如何完成的？

我试过这个：

  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>
  </pre>

标签按原样保留标签内的空格和换行符。

不过这不合适。如果我有很长的行，文本不会以卡片宽度换行。相反，超出卡片宽度的任何内容都会被截断。显然我想要这一切。我希望我的文本能够包裹在卡片中，并支持新的行和段落。这是怎么做的？

我正在使用类似这样的样式组件

const FormItem = styled(Form.Item)`
     font-size: 16px;
`;

使用类似这样的表单项

    <FormItem label="System Pressurized">
    {getFieldDecorator('systemPressurized')(
      <Select defaultValue="" placeholder="Select Type">
        <Option value="Yiminghe">yiminghe</Option>
      </Select>,
    )}
  </FormItem>

我试过改变 AntD 的字体大小，但它似乎没有锻炼

在Material Design Typography中有一个Body 1和Body 2。

虽然人们可以很容易地看到它们之间的差异 -Body 1字体大小和字母间距稍大 - 我想知道什么时候会使用Body 1以及什么时候会使用Body 2.

我找不到任何关于这一点以及为什么有两种正文字体的提示。谁能解释一下吗？谢谢！

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

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

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

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

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

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

我希望西方和亚洲字体保持一致，因为我必须输入多语言文档。

在其他 Office 程序中也会出现这种情况： 1. 在 PowerPoint 中，它会自动切换到 Yu Gothic Light。2. 在Excel中，它是Microsoft Yahei，但显示为Calibri。

当我在其他应用程序（包括我的网络浏览器，甚至记事本）中输入日语时，不会发生这种情况，因此我确定这是 Office 问题。

我在互联网上搜索了所有解决方案，但都没有解决问题。