Practical Methods for Achieving Semi-Bold Fonts in CSS: Challenges in Converting from Design Tools to Code

Implementation Principles of Font Weights in CSS

In CSS, the font-weight property is used to define the thickness of fonts. Standard values include normal (corresponding to numeric value 400) and bold (corresponding to numeric value 700). For intermediate weights like semi-bold, the numeric value 600 can be used. However, the effectiveness of this method highly depends on whether the font family in use supports that numeric weight.

Differences Between Design Tools and Code Implementation

Design tools like Photoshop and Figma handle font weights differently than CSS. In Figma, font family and font weight are treated as "pairs," with weight values represented as strings (e.g., "Semi Bold"), which contrasts with the independent numeric properties in CSS. This discrepancy can lead to mismatches when converting designs to code.

Solution Using Specific Font Family Names

To achieve precise semi-bold effects, the recommended approach is to use specific font family names. For example, for the Myriad Pro Semi-bold font, you can directly set:

font-family: "Myriad Pro Semibold";

In this method, the font-weight property is typically not needed and is better left unset to ensure browsers correctly identify the font variant.

Browser Compatibility Challenges

Browsers exhibit significant differences in implementing font weights. Most browsers struggle to automatically select the correct font variant based on font-weight numeric values, typically only supporting normal and bold. Testing shows that Internet Explorer 9 can handle the logical approach properly, but Firefox and Chrome perform poorly in this regard. Therefore, using specific font family names becomes a more reliable cross-browser solution.

Practical Code Examples and Best Practices

Here is a complete CSS example demonstrating how to achieve semi-bold effects:

.semi-bold-text {
    font-family: "Myriad Pro Semibold", sans-serif;
    /* Avoid setting font-weight to ensure correct rendering */
}

In actual projects, it is advisable to confirm available font names using system font listing tools and always provide fallback font families to ensure compatibility.

Collaboration Recommendations with Design Tools

To minimize conversion issues from design to code, designers and developers should communicate closely about font specifications. Determine available font variant names during the design phase and maintain consistency in code. When using design token tools, pay attention to the exact matching of font family and weight strings to avoid errors caused by case or spacing differences.