letter-spacing

Keep width when using letter-spacing on hover

由 孤街浪徒 提交于 2019-12-19 09:50:16
问题 I have a some basic button styles where on :hover I add the letter-spacing property: .btn { display: inline-block; text-align: center; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; } .btn-primary { background-color: #8065F1; color: #FFFFFF; } .btn-large { border-radius: 32px; box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23); padding: 0.25rem 3rem; font-size: 1.5rem;

Letter spacing in canvas element

由 南笙酒味 提交于 2019-12-18 11:00:53
问题 The question says it all pretty much. I've been searching around and starting to worry that it's impossible. I've got this canvas element that I'm drawing text to. I want to set the letter spacing similar to the CSS letter-spacing attribute. By that I mean increasing the amount of pixels between letters when a string is drawn. My code for drawing the text is like so, ctx is the canvas context variable. ctx.font = "3em sheepsans"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx

How to modify letter-spacing in a JTextPane?

由 半城伤御伤魂 提交于 2019-12-18 08:57:10
问题 I'm need to modify letter-spacing (font tracking) in a JTextPane, and I can't get it to work. When I'm using a JTextArea, I can just do: Font font = new Font("Courier New", Font.PLAIN, 10); HashMap <TextAttribute, Object> attrs = new HashMap<TextAttribute, Object>(); attrs.put(TextAttribute.TRACKING, -0.1); font = font.deriveFont(attrs); textArea.setFont(font); but as I need to change line spacing, I need to use a JTextPane, and doing: textPane.setFont(font) as I did with the JTextArea doesn

Is there a way to make css letter-spacing: 0.5 px?

由 烂漫一生 提交于 2019-12-17 16:42:09
问题 I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I'll use half a pixel so 0.5px, but it doesn't work, I tried using em attributes, but didn't achieve the task. So is there a way to make letter spacing half pixel (cross browser solution if possible) 回答1: This bug has been reported back in 2008 and is confirmed. So if someone feels like hacking into webkit that would make a lot of designers happy.

CSS text justify with letter spacing

由 眉间皱痕 提交于 2019-12-17 10:53:25
问题 Is there a way to automatically justify words using letter spacing, each in its row, to a defined width, using CSS? For example, "Something like this" would look, well, something like this: Is there a non-obtrusive way to apply such styling to my text? I believe pure CSS doesn't have this option (at least not with CSS versions before 3, CSS3 seems to have a text-justify property, but it's not well supported yet), so js solutions would be fine also. 回答1: Here's a script which can do it. It isn

Webkit, letter-spacing issues with webfonts

由 偶尔善良 提交于 2019-12-11 08:23:53
问题 Here's my issue. Using a Google Webfont called "PT Sans Narrow" on a site project. To preface, FF and IE are showing it perfectly. Webkit browsers are a bit of another story though, the font loads correctly but when I combine it with a "letter-spacing: -.05em" I get a brief text load where i see the webfont w/o the kerning - sticks there for a fraction of a second and then refreshes itself to the final correctly kerned look. I can describe it as more of a "slingshot" effect than anything - if

How to correct the ligatures of 'fi' and 'fl' in case of larger letter-spacing?

由 你说的曾经没有我的故事 提交于 2019-12-11 05:46:51
问题 I use Google font 'Roboto' and expanded letter-spacing of .3em . How in this case is posible to corect sticky ligatures of little 'f' letter in words consisting 'fl' and 'fi' ? I tried to change to font-family for 'Roboto' to 'sans' and 'sans-serif', but it looks so ridiculus in condition of expanded letter-spacing. Have you any advise? html,body{ min-width:100vw; max-width:100vw; min-height:100vh; max-height:100vh; margin: 0; padding: 0; } *{ margin: 0; padding: 0; box-sizing:0; } body {

Safari kerning issue when using “f” and “i”

由 旧巷老猫 提交于 2019-12-10 14:48:58
问题 I am running Safari 8.0.5 on OS X 10.10.3. I've ran into a letter-spacing issue whenever using the characters "f" and "i" right next to each other. My guess is that this is a Safari bug, and I've submitted it to Apple as such, but also wanted to see if I can find a workaround in the mean time. The HTML outputs the phrase "The fish is large" in two separate fonts. To accentuate the issue, I've adding 10px of letter spacing between each character. HTML: <div class="p1"> The fish is large </div>

Keep width when using letter-spacing on hover

由 ▼魔方 西西 提交于 2019-12-05 20:50:07
I have a some basic button styles where on :hover I add the letter-spacing property: .btn { display: inline-block; text-align: center; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; } .btn-primary { background-color: #8065F1; color: #FFFFFF; } .btn-large { border-radius: 32px; box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23); padding: 0.25rem 3rem; font-size: 1.5rem; text-transform: uppercase; } .btn:hover { letter-spacing: 4px; } <button type="button" class="btn btn

How to adjust letter-spacing in JavaFX

由 爷，独闯天下 提交于 2019-12-05 11:00:28
When using JavaFX2, how can i adjust the letter-spacing between characters of a Text object? Examples either in code or css are welcome. I wonder if this might point you in the right direction. I found the information here ... This article talks specifically about letter spacing... package addingfontinstyle; import javafx.scene.effect.DropShadow; import javafx.scene.effect.GaussianBlur; import javafx.scene.effect.light.DistantLight; import javafx.scene.effect.light.SpotLight; import javafx.scene.effect.Lighting; import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.scene
订阅 letter-spacing