那些遇到过的问题

标签: typography

将标题对齐到相同的基线,无论后续文字如何？

有没有办法将不同大小的多个标题的第一行对齐到同一基线？无论后面的文本如何,也应该对齐.

见图片在http://snapplr.com/snap/z1mw请

编辑:重新上传:

alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

在我看来,唯一的解决方案是将每个标题和每个正文文本放入单独的DIV,然后使用标题来填充顶部或边缘顶部以对齐它们(例如,H1将是36px,0px边距,而H3将是24px,12px上边距).像这样的东西:

<html>
<head>
    <style type="text/css" media="all">
        div {
            width: 240px;
            float: left;
        }

        h1 {
            font-size: 36px;
            margin: 0;
            padding: 0;
        }

        h3 {
            font-size: 24px;
            margin: 0;
            padding: 10px 0 0 0; /*for some reason I must use 10px instead of 12px to align. Why??*/
        }
    </style>
</head>
<body>
    <div>
        <h1>H1 heading</h1>
    </div>
    <div>
        <h3>H3 heading</h3>
    </div>
    <div>
        <h3>H3 heading that is somewhat longer and spans multiple lines</h3>
    </div>
    <div style="clear:both;"></div> …
Run Code Online (Sandbox Code Playgroud)

html css typography vertical-rhythm

Jos*_*ter
2011 02-14
8
推荐指数
1
解决办法
2511
查看次数

CSS - 在下降时显示文本而不是基线？

是否有正确的方法在线的下降高度而不是基线显示文本？

请参考以下页面:

http://en.wikipedia.org/wiki/Baseline_(typography)

和

http://jsfiddle.net/YPPnU/

我的目标是让文本的底部(如小提琴中所示)与H1块的底部齐平,而不使用图像.

我意识到如果我使用降序字符(p,q等)它是同花的,但是,我将永远不会将它们用于此项目的范围.我需要没有下行器的字符与h1块的底部齐平.

我已尝试使用定位和负边距进行各种调整,但这会带来两个问题:1)h1的高度变得混乱.2)负底部的数量可能因使用的字体面而异.是否有"正确"的方法来做到这一点？

编辑 请参阅评论以获取更多更新....

最好的工作技术在这里:http: //jsfiddle.net/YPPnU/23/

但我宁愿不要"猜测"线高

另外,我意识到另一个选择是使用webfont,其中所有角色的底部放置在下降而不是基线,但我似乎无法在谷歌上找到一个.有谁知道这样的事情是否存在？

html css typography

kjl*_*kjl
2011 05-31
8
推荐指数
1
解决办法
2019
查看次数

Android"Roboto Light"像素化

我在我的应用程序中包含了Roboto系列字体,并在代码中创建字体,如下所示:

Typeface robotoLight = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Light.ttf");
Run Code Online (Sandbox Code Playgroud)

我注意到某些较小的尺寸(甚至来自Android Developer Typography页面的建议尺寸)显得扭曲或像素化.这是TextView应用程序中几个s 的屏幕截图:

roboto_pixelated

"即将到来的日期"使用更大的尺寸,看起来很好.其他的尺寸为14sp,看起来很糟糕.问题不在于TextViews 中的边距或填充- 我试图改变它们.有谁知道导致这个问题的原因,以及如何解决这个问题？

fonts android typography

mho*_*lum
lucky-day
8
推荐指数
1
解决办法
1290
查看次数

使用中世纪(小写,非衬里)数字

我有一个客户要求在iOS 7项目中使用某种字体,因为它有中世纪的数字.

有没有办法为NSAttributedString激活这些数字？由于使用了默认的衬里编号,因此也包含在字体中.

这是一个例子.两条线都有相同的字体,没有变体(常规),一旦激活了中世纪数字,第二条线就有默认的衬里数字.

在此输入图像描述

cocoa-touch typography objective-c nsattributedstring ios7

Vik*_*ica
2014 03-01
8
推荐指数
1
解决办法
683
查看次数

CSS中的大小单位

我最后几天处理响应式网页设计和网页设计的单位.我的问题是关于CSS中的大小单位,这意味着不仅与字体大小有关,还与填充,宽度,媒体查询,...

对于大多数专业网页设计师来说,大多数用例都被认为是px.

每个人都反对px

一些文章让我得出这个假设

这篇文章也有一个意见专家: 我应该在CSS中使用px或rem值单位吗？

反对px/for(r)em的原因？

媒体查询

在许多文章之后,em媒体查询的最大优势是,当使用浏览器的纯文本缩放时,甚至应用这些媒体查询.

但是我认为所有现代浏览器都支持全页面缩放,这也适用于以像素定义的媒体查询(在最新的Firefox和IE中测试).

无障碍

em(或rem)似乎推荐用于font-size(可访问性),但其他大小是什么？

增加可访问性是IMHO没有重要原因,因为现代浏览器支持整页缩放.我不知道屏幕阅读器,但我无法想象,他们在过去几年里没有得到改进.

可维护性

通过更改基本大小可以轻松更改整个站点的大小.

如果它是每个设备的持久更改,那么在使用CSS预处理器时应该非常容易.

我能找到的唯一原因是在css-tricks.com文章中,因为您可能希望在移动设备上更改所有尺寸.你真的想要这个/大多数元素吗？对于某些像大标题这样的情况似乎很有用,但为什么移动用户能够比桌面用户更好地阅读较小的文本？另外,参考像素中的测量补偿不同的DPI.

现实生活中的例子

我粗略地分析了他们的源代码,可能我忽略了一些事情.

Bootstrap 3

在大多数地方使用px:字体大小,媒体查询,填充,边距...网格系统至少使用百分比宽度.但是,您可以在Github上找到有关此主题的许多问题.许多人要求em/rem.

ZURB基金会5

它基于rem和em,在极少数情况下它使用px,但仅用于边框等.

cloudfour.com

em中的媒体查询和字体大小以及其他所有内容的不同单元组合:px,%,em.

css-tricks.com

字体大小,填充,边距主要在px中,但是em中的媒体查询和%中的一些宽度.

到目前为止,我到处都读过,你应该使用相对大小并且已经这样做了.如果有合理的理由(我认为是这样,因为许多专业人士这样做)我将继续/改进这样做,但它比使用px更复杂.

如果你假设大多数人都在使用整页缩放,那么px对于所有内容的问题在哪里,拥有一个一致的单位似乎很好？(支持那些未将浏览器/设备升级近10年(IE <= 7)的人不是我的目标.)

这是要走的路？(请考虑不同的属性font-size,width,media queries,...)

html5 accessibility typography css3 responsive-design

Nik*_*ter
2017 05-23
8
推荐指数
1
解决办法
3368
查看次数

字体会混淆数字的对齐方式

我正在使用Raleway字体,但此字体不能正确对齐字母.

您可以在此代码段中看到此内容: 

    h1 {
      font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
    }
Run Code Online (Sandbox Code Playgroud) 
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>
Run Code Online (Sandbox Code Playgroud)

我能轻易解决这个问题吗？或者这只是一个错误的字体,我应该选择另一个？

html css fonts typography

sjb*_*sse
2015 08-11
8
推荐指数
3
解决办法
7076
查看次数

Gatsby.js:在没有渲染阻止的情况下为版式主题加载Google字体

我正在使用Gatsby.js及其带有Irving主题的Typography插件.

此主题需要Google字体"Exo"和"Yrsa",并<head>在导出的静态html文件部分添加导入:

<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>
Run Code Online (Sandbox Code Playgroud)

此导入是渲染阻止内容,如果可能,我会更愿意避免使用这些内容和Google PageSpeed Insights分数.

我尝试使用gatsby-plugin-google-fonts并将以下内容添加到我的gatsby-config.js中:

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Exo\:700`,
      `Yrsa\:400,700`,
    ],
  }
},
Run Code Online (Sandbox Code Playgroud)

然而,这只是添加了第二个导入调用.我应该将它们放在静态目录中吗？即使这样,我如何配置Typography仍然使用这些字体而不单独导入它们？

typography google-font-api google-pagespeed gatsby render-blocking

dou*_*lin
2018 01-23
8
推荐指数
1
解决办法
1642
查看次数

如何将单个 unicode 字符在容器中垂直居中？

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

\n\n

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

\n\n
.someDiv {\n   width: 10px;\n   height: 10px;\n   line-height: 10px;\n   text-align: center;\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n

容器内偏心圆字形的示例

\n\n

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

\n

html css typography vertical-alignment

Pin*_*ple
lucky-day
8
推荐指数
1
解决办法
2945
查看次数

角度材料排版设置不正确

我正在尝试实施 Angular Material Typography，但是我遇到了一些困难，我不确定可能是什么问题。

我按照 Angular在此处提供的说明进行操作，但是遇到了问题。问题是看起来应用程序中的所有内容都受到了影响，但是有些内容被看起来像默认排版的东西覆盖了，我不确定我做错了什么。

创建和使用的排版

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);
Run Code Online (Sandbox Code Playgroud)

正如您在排版中看到的100px那样，我故意设置了第一个参数（字体大小），以便我可以查看应用程序上的所有内容是否都受到影响。

示例 #1：材质按钮

对于 Angular Material 按钮（在 …

typography sass angular-material angular angular-material-theming

L1g*_*ira
2019 04-16
8
推荐指数
1
解决办法
5693
查看次数

溢出换行：断字与断字：断字

overflow-wrap: break-word和 和有什么区别word-break: break-word？

\n

正如您从以下示例中看到的，选项 1 和选项 2 之间没有视觉差异。（您需要取消注释其中之一。）

\n

\r\n
\r\n
body {\n  width: 300px;\n}\n\n.dont-break-out {\n  /* Option 1 */\n  /* overflow-wrap: break-word; */ \n  /* Option 2 */\n  /* word-break: break-word; */\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<p class="dont-break-out" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>\n\n<p class="dont-break-out" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica …
Run Code Online (Sandbox Code Playgroud)

html css typography word-wrap

joh*_* j.
2021 03-21
8
推荐指数
1
解决办法
2020
查看次数

标签 统计

typography ×10

css ×5

html ×5

fonts ×2

accessibility ×1

android ×1

angular ×1

angular-material ×1

angular-material-theming ×1

cocoa-touch ×1

css3 ×1

gatsby ×1

google-font-api ×1

google-pagespeed ×1

html5 ×1

ios7 ×1

nsattributedstring ×1

objective-c ×1

render-blocking ×1

responsive-design ×1

sass ×1

vertical-alignment ×1

vertical-rhythm ×1

word-wrap ×1