typography

How can I center a single unicode character vertically in a container?

由 你说的曾经没有我的故事 提交于 2019-12-11 06:35:35
问题 When I'm making web pages I like to use unicode characters for icons when images or SVGs really aren't necessary. It's easy for me and it makes the page lighter. This works pretty well, usually, except that I always end up having to fiddle with the offset to get it centered correctly. Yes, yes, I know about this: .someDiv { width: 10px; height: 10px; line-height: 10px; text-align: center; } But the catch is that most glyphs are not themselves vertically centered. This means that I end up, for

Defining CSS @Font-Face bold italic

由 懵懂的女人 提交于 2019-12-11 03:48:20
问题 I am working on a project where I six weights/styles of the font I am working with. These include: regular, italic, semibold, semibold italic, bold and bold italic. I have the @font-face tags setup (in theory) the way they should show. What happens in reality however is that the bold is always italic. Is there anyway to declare these bold + italic weights so that they will work properly? I don't want to call different font-family names all over the place. Ideally I should just be able to

Horizontally aligning blocks on text baseline

由 断了今生、忘了曾经 提交于 2019-12-11 02:29:13
问题 I have the following HTML code: <header> <h1>Title</h1> <nav> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </nav> </header> I am looking to turn this into a single line on the top of my web page by floating right the <nav> . However, because the <h1> has a much bigger font size than the <li> elements the text gets misaligned. I want the elements to be aligned on the baseline. In a picture: Note the red line for the baseline. This is what I have right now: #float, #nofloat { width:

Adjoining “f” and “l” characters

由 二次信任 提交于 2019-12-08 13:14:54
问题 For some reason, when I display the word "Butterfly" (or anything else with an "fl"), the "f" and the "l" connect at the top (see image below). The font is Century Gothic Bold. This is the code I use to setup the UILabel. The string for the label is retrieved from a plist: UILabel *label = [[UILabel alloc] init]; label.text = [self.flashcardDelegate.alphabetArr objectAtIndex:index]; label.textColor = [UIColor colorWithRed:.733 green:0 blue:.03137 alpha:1]; label.backgroundColor = [UIColor

CSS - Is it Possible to “Shrink Wrap” a Bounding Block to a Font's Cap and Baseline?

由 我只是一个虾纸丫 提交于 2019-12-08 05:43:57
问题 I have some <h1> and <p> tags with text content. I'd like the top of the text (cap height) and the bottom of the text (baseline) to be flush with the tag's bounding block. By default there seems to be a certain amount of spacing and I don't know why. Is there a calculation to determine this spacing? I can achieve what I'm after if I modify the line-height and the height properties of the element, but then the original and desirable line-height for multi-line text overlaps and isn't what we

What is the meaning Flutter's width metrics for the Paragraph class?

由 ≯℡__Kan透↙ 提交于 2019-12-08 04:53:06
问题 The documentation for Paragraph has four different ways to get a width distance: width → double The amount of horizontal space this paragraph occupies. longestLine → double The distance from the left edge of the leftmost glyph to the right edge of the rightmost glyph in the paragraph. maxIntrinsicWidth → double Returns the smallest width beyond which increasing the width never decreases the height. minIntrinsicWidth → double The minimum width that this paragraph could be without failing to

Using @fontface, how do I apply different styles to different font-families?

由 …衆ロ難τιáo~ 提交于 2019-12-07 09:23:34
问题 I'm having trouble with some CSS. Currently I'm using @fontface which works fine and dandy. However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently. For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman. Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed. Is this even possible? And if so, please assist

What exactly is the font-size? [duplicate]

由 匆匆过客 提交于 2019-12-07 07:19:30
This question already has answers here : Closed 7 years ago . Possible Duplicate: CSS Font Size Specifics I have been wondering what exactly is the font size when it comes to web design. I mean if I set the font size to 25px, will my text have a height of 25px ? Because I tried that with photoshop and if I set the font size to 30px, a regular capital letter (ex: "B") will be 24px tall, a regular letter (ex: "a") will be 19px tall and a "j" will be 27px tall. So what exactly means the font size ? EDIT: My question may not be clear so, how can you compute the height of a letter based on the font

Text highlighting (label effect) using CSS

由 吃可爱长大的小学妹 提交于 2019-12-07 04:32:00
问题 I want to create a text style similar to a label. Looky here: I can nearly do it using just: http://jsfiddle.net/STApE/ p{display: inline; background: yellow;} BUT, I want to add some padding. When I do, things go downhill. Same happens if I add a border: http://jsfiddle.net/JN72d/ Any ideas on a simple way to achieve this effect? 回答1: I was able to achieve it by modifying your DOM structure a bit: http://jsfiddle.net/Zp2Cm/2/ 回答2: Wrap each line with a span. Set the span to be block-level.

CSS - Is it Possible to “Shrink Wrap” a Bounding Block to a Font's Cap and Baseline?

由 时光总嘲笑我的痴心妄想 提交于 2019-12-06 15:28:51
I have some <h1> and <p> tags with text content. I'd like the top of the text (cap height) and the bottom of the text (baseline) to be flush with the tag's bounding block. By default there seems to be a certain amount of spacing and I don't know why. Is there a calculation to determine this spacing? I can achieve what I'm after if I modify the line-height and the height properties of the element, but then the original and desirable line-height for multi-line text overlaps and isn't what we want. Ex. Right-click a <p> tag on this page and hover the element in the dev console to notice that the
订阅 typography