资讯详情

下载字体

字体 DS-Digital

 

放置字体

 

引入字体：

<style scoped>

/* 定义字体 */

@font-face {

  font-family: 'DS-Digital'; /* 自定义字体名称 */

  /* 引入不同格式的字体文件，确保兼容性 */

  src: url('@/assets/fonts/DS-DIGI.TTF') format('truetype'),

       url('@/assets/fonts/DS-DIGIB.TTF') format('truetype'),

       url('@/assets/fonts/DS-DIGII.TTF') format('truetype'),

       url('@/assets/fonts/DS-DIGIT.TTF') format('truetype');

  font-weight: normal; /* 字体粗细 */

  font-style: normal;  /* 字体样式 */

  font-display: swap;  /* 字体加载策略 */

}

 

 

使用字体。

 

https://www.tpointtech.com/how-to-display-a-digital-clock-using-html-css-and-javascript

DS-Digital

Digital-7

 

数字时钟常用的字体包括RADIOLANDSLIM、液晶字体、Helvetica Neue Ultralight、San Francisco Display Ultralight等，具体选择取决于时钟类型（如电子时钟、iOS时钟等）和设计需求。

‌常见数字时钟字体类型‌

1. ‌电子时钟字体‌。

   • ‌RADIOLANDSLIM‌：专为电子时钟设计的字体，需额外安装。‌‌1
   • ‌液晶字体‌：模拟液晶显示屏效果，需下载安装，如lcdnova等变体。‌‌1‌‌

2. ‌iOS系统时钟字体‌。

   • ‌Helvetica Neue Ultralight‌：iOS 7-8使用的纤细字体。‌‌2
   • ‌San Francisco Display Ultralight‌：iOS 9及后续版本采用的字体，商业授权受限，可用Roboto Thin替代。‌‌2

3. ‌其他专用时钟字体‌。

   • ‌DBLCDTempBlack‌：部分场景使用的等宽数字字体。‌‌3
   • ‌Elliotsans-Regular‌：空心时钟数字字体，适合装饰性设计。‌‌4
   • ‌SF NS Ultracompressed Semibold G1‌：紧凑型钟表字体，适合时间显示。‌‌5

‌字体特点与用途‌

• ‌等宽设计‌：多数时钟字体为等宽，确保数字对齐（如DBLCDTempBlack）。‌‌6
• ‌高辨识度‌：液晶字体和紧凑型字体（如SF NS Ultracompressed）强调清晰易读。‌‌‌‌5
• ‌商用限制‌：部分字体（如San Francisco）需注意授权问题，可选用免费替代品。‌‌2

==========================================

vue中如何使用自定义字体

在 Vue 中使用自定义字体可以通过以下步骤实现，主要思路是先引入字体文件，然后在 CSS 中定义并使用：

1. 准备字体文件

将你的自定义字体文件（通常是 .ttf、.woff、.woff2 等格式）放在项目目录中，建议创建 src/assets/fonts 文件夹统一管理。

2. 在 CSS 中引入并定义字体

可以在组件的 <style> 中或全局 CSS 文件（如 src/assets/css/global.css）中定义：

css 

/* 定义字体 */
@font-face {font-family: 'MyCustomFont'; /* 自定义字体名称 *//* 引入不同格式的字体文件，确保兼容性 */src: url('@/assets/fonts/custom-font.woff2') format('woff2'),url('@/assets/fonts/custom-font.woff') format('woff'),url('@/assets/fonts/custom-font.ttf') format('truetype');font-weight: normal; /* 字体粗细 */font-style: normal;  /* 字体样式 */font-display: swap;  /* 字体加载策略 */
}

 

3. 在组件中使用

定义后就可以在样式中通过 font-family 使用：

 

 https://blog.csdn.net/weixin_45294459/article/details/125146585

==========================================