Comments (6)
Still can’t figure a way around this one. If -webkit-font-feature-settings
is on the body tag on Twitter, it breaks the layout.
Could be something to do with kerning specifically conflicting with the inline-block and font-size: 0
“hack,” but I haven’t been able to reproduce the bug in a smaller test case yet. Also, it occurs regardless of what kern
is set to.
from normalize-opentype.css.
Looks like it might be an edge case interaction with Screensmart fonts from H&FJ? I played around with this a bit on my cloud.typography.com dashboard and it caused some weirdness with line breaks. Couldn't reproduce it otherwise. I don't have a license for Gotham Narrow Screensmart so I can't test to say for sure but we could try it with my other licenses.
from normalize-opentype.css.
Ah, nevermind, this is happening if I switch out Gotham on their site for Fira as well.
from normalize-opentype.css.
Thanks for taking a look, it’s entirely possible that there will be a subsequent issue with the Cloud.typography stuff.
I managed to get it down to a simplified test case on Codepen now, and I have some stuff borrowed from Twitter’s stylesheets in a branch for my next try at it.
from normalize-opentype.css.
I took a crack at this: http://codepen.io/ry5n/pen/hnoFD
The fix I found (at least for Chrome) is to set font-feature-settings
to normal
along with font-size: 0
and then restore the desired Opentype settings as well as font size on the children.
from normalize-opentype.css.
Thanks so much for tackling this, Ryan. That’s what I was hoping for from font-feature-settings: none
. It’s only an issue in Chrome so you’ve found the fix as far as I’m concerned.
from normalize-opentype.css.
Related Issues (20)
- Use `inherit` instead of carrying settings down manually
- Typo "numer" for "number" HOT 3
- Contextual alternates should be on by default
- Use tabular numerals for phone numbers? HOT 2
- Muddles text selection in Chrome on OS X
- Why addressing html *and* body? HOT 3
- Address additional standard defaults
- Property not being applied in FF, Chrome and Chrome Canary HOT 4
- Stop using tracking for ligature tests
- ::selection bugfix defaults to transparent
- Numbers not displaying HOT 1
- npm package HOT 2
- Add a real example HOT 2
- @extend body; in table produces undesired results HOT 4
- Poor performance when there are a large number of text nodes (in Chrome OS X)
- Are you planning to write more code? HOT 3
- Any plans to get this upstream to 'necolas/normalize.css' ? HOT 2
- font-variant HOT 2
- Is `text-rendering: optimizeLegibility` still seen as problematic?
- Tag as v1.0.0 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from normalize-opentype.css.