标签: typography

如何使用当前的 CSS 最佳实践来平衡合适的字体大小（无论何种媒体（小型垂直手机屏幕或整页打印））和舒适的每行 40~80 个字符？

我想我知道常规屏幕的操作方法，将正文的字体大小设置为某个百分比，将主要内容元素标记为宽度为 70em，最小宽度为 40em...

但是，我对这个问题的移动和打印公认标准一无所知。

我所有的搜索尝试都让我（现在）从 2002 年到 2011 年徒劳地讨论 [em,pixel,%,pt] 相对于其他的好处......

我试图为我的博客开发一个新功能，即用于撰写文章的 Markdown 编辑器。

我选择了@tailwindcss/typographymarkdown -it来做到这一点，所以这是我的全部依赖项：

包.json

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": "^12.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.3.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "dotenv-webpack": "^7.0.3",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "tailwindcss": "^2.2.7",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

下面的代码是该功能的组件，包括编辑区域和预览区域。然而，这并没有奏效。

当我运行此代码时，它会像这样呈现，而无需印刷<h1>标签。

但是，如果我md.render(markdown)用<h1>hello</h1>（降价-它的渲染结果）替换，它似乎“有效”，看起来像这样。

编辑器.jsx

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": …

据我了解，字体或字体系列可能没有为每个 Unicode 字符定义所有字形。每当我有表情符号字符时，有效的字体系列是什么？

例如，如果我有：

<p style="font-family:Arial">&#x1f354; Hamburger</p>

汉堡表情符号取自哪种字体？

我问的原因是，在我的桌面 Chrome 上，表情符号相对简单且丑陋，而在我的 Android Chrome 上，相同的表情符号有更多的细节和颜色。作为网页创建者，我可以控制或选择使用什么“字体”在客户端中呈现表情符号吗？

我正在使用带有 Tailwind 和 Typography 的 Jekyll 模板，并且我有兴趣覆盖每行默认的最大宽度 65ch 限制。

默认设置是max-w-prose，我尝试将 和max-w-none一起设置为父元素prose，但它似乎不起作用（尽管它与对齐方式混淆）。我也尝试过在每个元素中设置max-w-nonewith prose（警惕不必要的覆盖到 65ch），但这也没有削减它。

我认为这可以通过 tailwind.config.js 文件来完成，例如：

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'prose': {
              'max-width': '100ch'
            },
            'max-w-prose': {
              'max-width': '100ch'
            },
        ...

但我不明白。任何提示都非常受欢迎！

我正在尝试实施正文第一段第一个字母.我被困在哪里是在第一个字母和段落的其余部分之间获得一致的间距.

例如,"W"和"I"之间的间距存在巨大差异

任何人对如何减轻差异都有任何想法？我更喜欢纯CSS解决方案,但如果需要,将使用JavaScript.

PS:我不一定需要在IE或Opera中兼容

我在CSS文件中引用了OpenType字体,但它似乎在Firefox 3.5中不起作用.它在Safari中完美运行.该字体相对引用,并托管在同一台服务器上,但在另一个子目录中:

@font-face { font-family:'Font Name'; src:url(../fonts/Font-Name.otf) format('opentype') }

有没有其他人与FF3.5 @ font-face有任何问题？

所以我正在委托一个网站,我正在努力改进我的代码.当处理具有多种类型字体的网站时(这里很小,那里很小,有大胆,这里有下划线等)是我们使用h1-h6,或者我们保留那些有时候一个明确的层次结构,而是<p class="xxx">用来定义文本的不同类？

在解析某些文档时,我得到了字符代码146,它实际上是一个ANSI编号.将char写入文本文件时,不会显示任何内容.如果我们将char写为Unicode编号-8217,则字符显示正常.

任何人都可以给我建议如何在C#中将ANSI编号146转换为Unicode 8217.

参考:http://www.alanwood.net/demos/ansi.html

谢谢

可能的重复：
CSS 字体大小细节

我一直想知道在网页设计中字体大小到底是多少。
我的意思是，如果我将字体大小设置为 25px，我的文本的高度是否为 25px？
因为我用 photoshop 尝试过，如果我将字体大小设置为 30px，一个普通的大写字母（例如：“B”）将是 24px 高，一个普通字母（例如：“a”）将是 19px 高和一个“j " 将是 27px 高。
那么字体大小究竟是什么意思呢？
编辑：我的问题可能不清楚，您如何根据 font-size 计算字母的高度？

我试图在 SwiftUI 中将我的文本更改为小型大写字母。但我不明白如何将方法应用于我的文本。

https://developer.apple.com/documentation/swiftui/font/3084273-smallcaps

我尝试了不同的方法，这里有两个：

Text("Typography")
    .font(.system(size: 24))
    .fontWeight(.bold)
    .smallCaps()

——

 Text("Typography")
     .font(.system(.body, textStyle: .smallCaps))

如何将我的字母设置为小写字母？我正在使用 Xcode 11.3。

谢谢！