[css-fonts-4] Update font matching algorithm with the WG's resolution

w3c#1579

Author: litherum

css-fonts-4/Overview.bs

@@ -446,6 +446,10 @@ given a font family containing normal and bold faces along with a thin and a hea
 Authors who desire finer control over the exact weight values used for a given element
 can use numerical values instead of relative weights.
 
+Note: There is a small behavior change between [[CSS-FONTS-3]] and this specification with the animation of the 'font-size' property.
+Previously, interpolated values of font-weight were rounded to their closest multiple of 100, and the font-matching algorithm was run on these
+rounded values. In this specification, the font-matching algorithm is able to accept any value, so no rounding occurs. The small behavior change is due to the discontinuous nature of the font-matching algorithm.
+
 <h3 id="font-stretch-prop">
 Font width: the 'font-stretch' property</h3>
 
@@ -2141,16 +2145,14 @@ if all font style properties were set to their initial value.
 				value of the 'font-synthesis' property.
 
 
-			3. 'font-weight' is matched next. If a font does not have any concept of varying strengths of weights, its weight is mapped according list in the <a href="#font-weight-numeric-values">property definition</a>. If bolder/lighter relative weights are used, the effective weight is calculated based on the inherited weight value, as described in the definition of the 'font-weight'property. If the matching set after performing the steps above includes faces with weight values containing the font-weight desired value, faces with weight values which do not include the desired font-weight value are removed from the matching set. If there is no face which contains the desired value, a weight value is chosen using the rules below:
+			3. 'font-weight' is matched next. If a font does not have any concept of varying strengths of weights, its weight is mapped according list in the <a href="#font-weight-numeric-values">property definition</a>. If bolder/lighter relative weights are used, the effective weight is calculated based on the inherited weight value, as described in the definition of the 'font-weight' property. If the matching set after performing the steps above includes faces with weight values containing the font-weight desired value, faces with weight values which do not include the desired font-weight value are removed from the matching set. If there is no face which contains the desired value, a weight value is chosen using the rules below:
 
-				* If the desired weight is 400, 400 is checked first, 500 is checked second and then the rule for desired weights less than or equal to 500 is used.
-				* If the desired weight is 500, 500 is checked first, 400 is checked second and then
-					the rule for desired weights less than or equal to 500 is used.
-				* If the desired weight is less than or equal to 500, weights below the
+				* If the desired weight is inclusively between 400 and 500, weights greater than or equal to the target weight are checked in ascending order until 500 is hit and checked, followed by weights less than the target weight in descending order, followed by weights greater than 500, until a match is found.
+				* If the desired weight is less than 400, weights less than or equal to the
 					desired weight are checked in descending order followed by
 					weights above the desired weight in ascending order until a
 					match is found.
-				* If the desired weight is greater than 500, weights above the
+				* If the desired weight is greater than 500, weights greater than or equal to the
 					desired weight are checked in ascending order followed by
 					weights below the desired weight in descending order until a
 					match is found.
@@ -2160,31 +2162,35 @@ if all font style properties were set to their initial value.
 
 					<img src="images/styleweight.svg" alt="distance graph">
 
-					As you can see, because font B contains the minimum oblique value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font D would then contain the lowest distance in the family, so it would be selected. If D were eliminated, A would be selected, followed by fonts C and then E.
+					As you can see, because font B contains the minimum distance across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font D would then contain the lowest distance in the family, so it would be selected. If D were eliminated, A would be selected, followed by fonts C and then E.
 				</div>
 
 				<div class="example">
-					Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 500":
+					Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 450":
 
-					<img src="images/weightmatching.svg" alt="distance graph">
+					<img src="images/styleweight450.svg" alt="distance graph">
 
-					As you can see, because font D contains the minimum oblique value across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font B would then contain the lowest distance in the family, so it would be selected. If B were eliminated, C would be selected, followed by fonts A and then E.
+					As you can see, because font C contains the minimum distance across the entire family, font C would be selected by this algorithm. However, if font C were somehow eliminated from the family, font D would then contain the lowest distance in the family, so it would be selected. If D were also eliminated, B would be selected, followed by fonts A and then E.
 				</div>
 
-				Once the closest matching weight has been determined by this process,
-				faces with weights which do not include this determined width are removed from the matching set.
+				<div class="example">
+					Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 500":
+
+					<img src="images/weightmatching.svg" alt="distance graph">
 
+					As you can see, because font D contains the minimum distance across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font B would then contain the lowest distance in the family, so it would be selected. If B were eliminated, C would be selected, followed by fonts A and then E.
+				</div>
 
 				<div class="example">
 					Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 300":
 
 					<img src="images/weightmatching2.svg" alt="distance graph">
 
-					As you can see, because font B contains the minimum oblique value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font A would then contain the lowest distance in the family, so it would be selected. If A were eliminated, C would be selected.
+					As you can see, because font B contains the minimum distance across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font A would then contain the lowest distance in the family, so it would be selected. If A were eliminated, C would be selected.
 				</div>
 
 				Once the closest matching weight has been determined by this process,
-				faces with weights which do not include this determined width are removed from the matching set.
+				faces with weights which do not include this determined weight are removed from the matching set.
 
 			4. 'font-size' must be
 				matched within a UA-dependent margin of tolerance. (Typically, sizes