Skip to content

Commit

Permalink
Implement font-synthesis-weight functionality
Browse files Browse the repository at this point in the history
Implement of CSS property font-synthesis-weight functionality, which
controls synthesized bold. Added tests for web and system fonts.

Bug: 509989
Change-Id: I11fe9eeac9cd9d143a7852023d62b0f859efe89d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3123421
Commit-Queue: Dominik Röttsches <[email protected]>
Reviewed-by: Rune Lillesveen <[email protected]>
Reviewed-by: Dominik Röttsches <[email protected]>
Cr-Commit-Position: refs/heads/main@{#916719}
  • Loading branch information
tursunova authored and chromium-wpt-export-bot committed Aug 31, 2021
1 parent 31c03f3 commit 7df27fb
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 0 deletions.
22 changes: 22 additions & 0 deletions css/css-fonts/font-synthesis-weight-binary-ref.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Test: font-synthesis-weight: none disables fake bold</title>
<style>
@font-face {
font-family: "NotoSans subset";
src: url(data:application/font-woff2;charset=utf-8;base64,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);
font-style: normal;
font-weight: normal;
}
.test {
font-family: "NotoSans subset";
font-size: 3em;
}
</style>

<p>Test passes if the two lines below are identical (the second line is <em>not bold</em>), and there is no red.</p>
<section class="test">
<p>Filler text</p>
<p class="nosynth">Filler text</p>
</section>
32 changes: 32 additions & 0 deletions css/css-fonts/font-synthesis-weight-binary.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Test: font-synthesis-weight: none disables fake bold</title>
<link rel="match" href="font-synthesis-weight-binary-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-synthesis-weight">
<meta name="assert" content=" If ‘weight’ is not specified, user agents must not synthesize bold faces for embedded fonts">
<style>
@font-face {
font-family: "NotoSans subset";
src: url(data:application/font-woff2;charset=utf-8;base64,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);
font-style: normal;
font-weight: normal;
}
@supports not (font-synthesis-weight: none) {
.test {color: red;}
}
.test {
font-family: "NotoSans subset";
font-size: 3em;
}
.nosynth {
font-weight: 700;
font-synthesis-weight: none;
}
</style>

<p>Test passes if the two lines below are identical (the second line is <em>not bold</em>), and there is no red.</p>
<section class="test">
<p>Filler text</p>
<p class="nosynth">Filler text</p>
</section>
20 changes: 20 additions & 0 deletions css/css-fonts/font-synthesis-weight-ref.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Test: font-synthesis-weight: none disables fake bold</title>
<style>
@font-face {
font-family: "lato";
src: url(support/fonts/Lato-Medium.ttf);
}
.test {
font-family: "lato";
font-size: 3em;
}
</style>

<p>Test passes if the two lines below are identical (the second line is <em>not bold</em>), and there is no red.</p>
<section class="test">
<p>Filler text</p>
<p class="nosynth">Filler text</p>
</section>
30 changes: 30 additions & 0 deletions css/css-fonts/font-synthesis-weight.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Test: font-synthesis-weight: none disables fake bold</title>
<link rel="match" href="font-synthesis-weight-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-synthesis-weight">
<meta name="assert" content=" If ‘weight’ is not specified, user agents must not synthesize bold faces">
<style>
@font-face {
font-family: "lato";
src: url(support/fonts/Lato-Medium.ttf);
}
@supports not (font-synthesis-weight: none) {
.test {color: red;}
}
.test {
font-family: "lato";
font-size: 3em;
}
.nosynth {
font-weight: bold;
font-synthesis-weight: none;
}
</style>

<p>Test passes if the two lines below are identical (the second line is <em>not bold</em>), and there is no red.</p>
<section class="test">
<p>Filler text</p>
<p class="nosynth">Filler text</p>
</section>

0 comments on commit 7df27fb

Please sign in to comment.