1. 产品
  2.   Font
  3.   JavaScript
  4.   Typr.js
 
  

免费 JavaScript 库，用于解析和渲染字体

开源 JavaScript 字体处理库，支持在浏览器中直接解析和渲染 TrueType 以及 OpenType 字体。

在网页和软件开发领域，排版在塑造整体用户体验方面起着关键作用。为了高效地操作和渲染字体，开发者依赖于简化此过程的强大库。其中一个库是 Typr.js，这是一款专为字体解析和渲染而设计的强大 JavaScript 库。它设计轻量，便于快速集成到网页项目中。该库支持所有主流网页浏览器，包括 Chrome、Firefox、Safari 和 Edge。这确保了在不同平台和设备上的字体渲染保持一致。

Typr.js 是一个强大的开源 JavaScript 库，为软件开发者提供轻量且多功能的解决方案，以处理各种字体文件。它能够在浏览器中直接解析和渲染 TrueType 和 OpenType 字体，消除对服务器端处理的需求。这使得 Typr.js 成为希望在网站上优化排版的网页设计师和开发者的宝贵工具。该库全面支持可访问性功能的实现，如文本缩放、字距调整和自定义字体加载，以满足不同用户的需求，等等。

Typr.js 非常易于使用，可用于各种 Web 应用程序，从简单的文本渲染到更复杂的排版相关项目。它支持简化功能，如在网页上加载和管理字体、分析和提取字体的各种指标、轻松在线操作和样式化文本、支持国际化和本地化、高级排版等。其丰富的功能集、轻量级特性和跨浏览器兼容性使其成为提升 Web 排版的宝贵工具。

Previous Next

Typr.js 入门指南

推荐的 Typr.js 安装方式是使用 npm。请使用以下命令在项目中添加 Maven 依赖。

通过 npm 安装 Typr.js

 npm install @fredli74/typr --save-dev

您也可以手动安装；直接从 GitHub 仓库下载最新发布文件。

通过 JavaScript API 加载和管理字体

开源的 Typr.js 为在 JavaScript 应用程序中加载和管理字体提供了完整支持。它简化了在网页上加载和管理字体的过程。它支持多种字体格式，包括 TrueType（TTF）、OpenType（OTF）和 Web Open Font Format（WOFF），使开发者能够无缝地将自定义字体集成到项目中。通过提供便捷的字体管理界面，Typr.js 使开发者能够高效地控制字体加载并优先处理字体子集，以优化性能。

添加 SVG 表解析器以解析 SVG 彩色字体

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
{
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
  {
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;
    }
  }

  return obj;

}

通过 JavaScript API 应用文本格式化和样式

开源的 Typr.js 库让软件开发者能够轻松在 JavaScript 应用程序中应用各种文本格式化。使用 Typr.js，开发者可以轻松地在网页上操作和样式化文本。它提供了广泛的文本布局功能，如换行、文本对齐和连字符处理，使开发者能够精确控制文本的呈现方式。此外，该库支持多种文本样式选项，包括字母间距、单词间距和文本装饰，使开发者能够创建视觉上美观且易读的文本。

在 JavaScript 应用中应用文本格式化和样式

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';
});

通过 JavaScript API 调整字距和连字

Typr.js 允许软件开发者利用高级排版功能，如字距调整和连字，以提升文本的视觉吸引力。字距调整会改变特定字符对之间的间距，从而改善整体可读性，而连字则用视觉上更悦目的替代字符序列。通过利用这些功能，开发者可以在网页上实现更精致、和谐的排版。

 中国人