JavaScript 如何保持字体回退时的文本可读性

在本文章中，我们将讨论如何在JavaScript中保持字体回退时文本的可读性。在设计网站或应用程序时，我们通常使用自定义字体来突出文本并与设计风格相匹配。然而，并不是所有用户都可能在其设备上安装这些自定义字体，这可能导致字体回退。这意味着用户的设备会使用默认字体而不是我们预期的自定义字体，这可能导致设计更难读和视觉上不吸引人。

字体回退发生在网络浏览器无法呈现特定字体时，相反地，它会使用用户计算机上可用的默认字体。如果回退字体与预期字体有明显差异，这可能导致可读性问题。以下是一些相关术语：

字体回退： 当浏览器无法显示在网页或应用程序的CSS中指定的字体时，就会发生字体回退。在这种情况下，浏览器将使用安装在用户设备上的默认字体。
网页字体： 网页字体是从服务器下载并用于网页或应用程序的字体。网页字体允许我们使用用户设备上可能没有的自定义字体。
Google Fonts： Google Fonts是一个网页字体服务，提供一系列可在网页上使用的免费和开源字体。
Typekit： Typekit是一个网页字体服务，提供一系列高质量的字体可供网页使用，但需要付费。
JavaScript： JavaScript是一种编程语言，用于为网页添加交互性和功能。在字体回退的背景下，我们可以使用JavaScript来检测字体回退并提供更可读且与设计风格相匹配的回退字体。

在字体回退发生时保持文本可读性的提示：

使用网络安全字体： 网络安全字体是指大多数计算机和电子设备上可找到的字体。使用网络安全字体，您可以确保回退字体与预期字体具有相同的样式和大小。常见的网络安全字体包括Arial，Helvetica，Times New Roman和Verdana。
从字体托管服务加载字体： 为了确保所需字体加载到用户的计算机上，您可以使用字体托管服务，如Google Fonts或Adobe Fonts。这些服务提供了大量适用于网络的字体选择，并且JavaScript使其简单地将它们添加到您的网站。
使用font-stretch属性： 使用font-stretch属性将回退字体的宽度更改为与预期字体的宽度匹配。可以使用此属性更改字体的宽度，而不会影响字体的大小或重量，并且可以使用JavaScript进行设置。
使用CSS设置字体堆栈： 您可以使用CSS设置字体堆栈，这定义了按重要性递增顺序的字体列表。这样，即使主要字体不可用，您也可以提供备用字体列表以及与预期字体在样式上相似的回退字体。

方法1：提供备用字体堆栈：

在这种方法中，当发生字体替换时，我们要保持文本的可读性，就需要提供备用字体堆栈。这涉及在font-family属性中指定多个字体系列，自定义字体首先指定，然后是备用字体。通过这样做，如果自定义字体不可用，浏览器会自动回退到堆栈中的下一个可用字体，从而确保文本保持可读性。

示例：

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Font Fallback Example</title> 
    <style> 
        #my-para { 
            font-size: 16px; 
            line-height: 1.5; 
        } 
    </style> 
</head> 
  
<body> 
    <p id="my-para"> 
        This is some text that should 
        use the Open Sans font. 
    </p> 
    <script> 
        var el = document.getElementById('my-para'); 
        el.style.fontFamily = 'Open Sans, Arial, sans-serif'; 
    </script> 
</body> 
</html>

输出：

JavaScript 如何保持字体回退时的文本可读性

方法2：检测字体回退并提供回退字体： 在这种方法中，我们将使用自定义字体来测量文本的尺寸，并将其与使用回退字体的文本尺寸进行比较。如果尺寸不匹配，则发生了字体回退，我们可以提供回退字体以确保文本可读。

例子：

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Font Fallback Example</title> 
    <style> 
        #my-para { 
            font-size: 16px; 
            line-height: 1.5; 
        } 
    </style> 
</head> 
  
<body> 
    <p id="my-para"> 
        This is some text that  
        should use the Open Sans font. 
    </p> 
    <script src="script.js"></script> 
</body> 
</html>

Javascript

var el = document.getElementById('my-para'); 
var testFont = 'Open Sans'; 
var fallbackFont1 = 'Arial'; 
var fallbackFont2 = 'Helvetica Neue'; 
  
// Create a test element with the Open Sans font 
var testEl = document.createElement('span'); 
testEl.style.fontFamily = testFont; 
testEl.innerText = 'Test Text'; 
el.appendChild(testEl); 
  
// Check if the test element's font is the 
// same as the Open Sans font 
if (testEl.style.fontFamily !== testFont) { 
  
    // The test element's font is not the  
    // same as the Open Sans font, so use  
    // the first fallback font 
    el.style.fontFamily = fallbackFont1  
        + ', ' + fallbackFont2 + ', sans-serif'; 
}

输出:

JavaScript 如何保持字体回退时的文本可读性