Comments (6)
Suggested algorithm (@svgeesus please review):
- Measure usage of
font-variation-settings
by axis, both as a descriptor and as a property. - Measure usage of two-value
font-weight
,font-style
,font-stretch
descriptors in@font-face
- Measure usage of
font-weight
that is non divisible by 100,font-style
withoblique <angle>
,font-stretch
with percentages not divisible by 12.5%, or outside the [50%, 200%] range - For
@font-face
and CSS rules with the above, record thefont-family
(to find most popular variable fonts)
from css-almanac.
I was about to start working on this, but it looks like there's huge overlap with the Fonts chapter: HTTPArchive/almanac.httparchive.org#902
There is some earlier discussion in there confirming this. I'm about to close this issue, but want to make sure that everything we planned to study is accounted for in Fonts.
cc @rviscomi @AbbyTsai @jpamental @davelab6
from css-almanac.
@LeaVerou woo, Happy to work the interaction of css and fonts chapters.
Some of them seem may be combined to existing fonts queries,
others would love to have your warm hands in together,
as I'm just new to the field(js, sql, etc) and couldn't start the journey without samples . Thank you.
1.How many websites use variable fonts? see fonts_04_14, payload, table_sizes.var.axisCount >0
2.What variation axes do they declare/use? see fonts_04_16, font-variation-settings
3.Do they mostly use the low-level font-variation-settings, or the higher level properties (where available)? need sample
4.What custom axes do they use? need sample
from css-almanac.
Hi @AbbyTsai,
Happy to help! What do you mean by samples? Samples of CSS?
from css-almanac.
@LeaVerou , would like to have both. (js+sql) if possible. thank you.
from css-almanac.
As much as I would love to, I'm afraid I don't have time to write queries for other chapters, since we already have ~40 metrics to calculate here. However, I would be happy to provide help with the algorithm or JS to whomever needs it.
Looking at the content outline it appears that pretty much all of these metrics are planned for the Fonts chapter, so I'm gonna go ahead and close this.
from css-almanac.
Related Issues (20)
- Which media query features are used most? HOT 3
- Selectors HOT 7
- How frequently is each color format used? HOT 34
- Usage of grid-template-areas as grid layout mechanism HOT 6
- Usage of named lines syntax when creating grid tracks HOT 5
- Grid-like use of flexbox HOT 8
- Multicol usage with column-count and column-width HOT 2
- [meta] Value utilization HOT 12
- direction CSS property usage HOT 8
- Analyze Sass stylesheets HOT 8
- What CSS hacks are still used to target browsers/versions/platforms? HOT 5
- How popular is each CSS preprocessing language? HOT 4
- [meta] Chapter outline HOT 4
- Logical vs physical properties HOT 2
- CSS-in-JS HOT 18
- Most common properties used inside media queries HOT 3
- [meta] Custom metrics HOT 8
- !important stats
- Global keyword usage
- Declaration repetition (DRYness) HOT 8
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 css-almanac.