Font Family
Category: BasicUtilizes various fonts and font sizes to meet general webpage display needs for headings and body text
Fonts
The framework provides 4 different font families for different use cases:
Class Name | Purpose | Characteristics |
---|---|---|
_ff-body |
Main body text for articles, paragraphs, navigation, descriptions | Supports English, French, German, Russian, Chinese (Simplified/Traditional), Japanese, Korean, Arabic |
_ff-icon |
Dedicated for icon fonts (UI icon libraries, graphic fonts) | Uses built-in icon fonts |
_ff-alt |
For prominent numbers, uppercase letters, statistics, alternative fonts | Optimized for Western languages first while supporting multilingual, more expressive style |
_ff-code |
Monospace font for code snippets, scripts, terminal output, comments | Supports Latin, Russian, Chinese comments |
Body Font
- Output
- HTML
-
The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
中国是位于东亚的一个幅员辽阔的国家,是世界上人口最多的国家,首都是北京。中国拥有悠久的历史和灿烂的文化,从古代的四大发明到现代的高速发展,在科技、经济、文化等多个领域都具有重要影响力。作为一个多民族国家,中国拥有丰富多样的地理风貌和文化传统,同时也是世界主要经济体之一。
香港是中國的一個特別行政區,位於華南沿海,毗鄰廣東省,擁有「東方之珠」的美譽。作為國際金融、貿易與航運中心,香港融合了中西文化,展現出獨特的城市風貌與生活方式。這裡擁有自由開放的經濟體系、法治精神及多元社會,亦以高樓林立、美食文化及購物天堂著稱,是亞洲最具活力與魅力的城市之一。
日本は東アジアに位置する島国で、本州、北海道、九州、四国をはじめとする多くの島々から構成されています。首都は東京です。日本は長い歴史と豊かな伝統文化を持ち、同時に先進的な技術や現代的な都市も発展しています。自然の美しさ、四季の移り変わり、美味しい食文化、そしてアニメや漫画などのポップカルチャーでも世界的に知られています。
السعودية، أو المملكة العربية السعودية، هي دولة تقع في شبه الجزيرة العربية وتُعدّ من أكبر الدول في الشرق الأوسط من حيث المساحة. عاصمتها الرياض، وتُعرف بثروتها النفطية الكبيرة التي تلعب دورًا محوريًا في اقتصادها. كما تُعتبر السعودية مهد الإسلام، حيث تضم أقدس المدن الإسلامية: مكة المكرمة والمدينة المنورة، مما يجعلها وجهة مهمة لملايين المسلمين حول العالم. تتميز بثقافة عربية تقليدية غنية تشهد في الوقت نفسه تغييرات وتحديثات كبيرة في مختلف المجالات.
한국은 동아시아에 위치한 나라로, 한반도의 남쪽에 자리잡고 있습니다. 수도는 서울이며, 현대적인 도시와 풍부한 역사, 전통 문화가 조화를 이루고 있습니다. 세계적으로 유명한 K-팝, 드라마, 한식 등 한류 문화는 많은 사람들에게 사랑받고 있습니다. 또한, 한국은 빠른 기술 발전과 높은 교육 수준을 자랑하는 나라로, 사계절이 뚜렷하고 다양한 자연 경관을 즐길 수 있는 매력적인 여행지이기도 합니다.
La France est un pays situé en Europe occidentale, connu pour sa riche histoire, sa culture, sa gastronomie et ses paysages variés. Paris, sa capitale, est célèbre pour des monuments emblématiques comme la Tour Eiffel, le Louvre et la Cathédrale Notre-Dame. La France est également reconnue pour ses vins, ses fromages et sa contribution importante aux arts, à la littérature et à la philosophie. Avec ses montagnes, ses plages et ses campagnes, la France attire chaque année des millions de touristes du monde entier.
Deutschland ist ein Land in Mitteleuropa, bekannt für seine reiche Geschichte, seine Kultur und seine wirtschaftliche Stärke. Die Hauptstadt Berlin ist berühmt für ihre historischen Sehenswürdigkeiten wie das Brandenburger Tor und den Reichstag. Deutschland ist weltweit für seine Automobilindustrie, seine vielfältige Landschaft mit Wäldern, Flüssen und Bergen sowie seine traditionelle Küche wie Bratwurst und Sauerkraut bekannt. Außerdem spielt Deutschland eine wichtige Rolle in der europäischen Politik und Kultur.
Россия — самая большая страна в мире, расположенная в Восточной Европе и Северной Азии. Она славится своей богатой историей, культурой и разнообразием природных ландшафтов — от холодных сибирских лесов до живописных гор Кавказа. Москва, столица России, известна такими достопримечательностями, как Красная площадь и Кремль. Россия также имеет значительное влияние в мировой политике, науке и искусстве.
-
Icon Font
When using icon fonts, the _icon-
prefix is not needed.
- Output
- HTML
-
search global add phone eye
-
Decorative Font
- Output
- HTML
-
Ancient Greece is often regarded as the cradle of Western civilization, influencing countless aspects of culture, politics, philosophy, and art. The history of Ancient Greece spans several centuries, from the early Minoan and Mycenaean civilizations (around 2000 BCE to 1100 BCE) to the rise of classical Greek city-states such as Athens and Sparta.
1256
-
Code Font
- Output
- HTML
-
#include <stdio.h>
#include <stdlib.h>
#include <time.h>
int main() {
//初始化
int i;
int rotationSpeed = 1000;
srand(time(NULL));
for (i = 0; i < 10; i++) {
printf("running...\n");
usleep(rotationSpeed * 1000);
}
//返回值
return 0;
} -
Font Weight
Font weight options vary by font family. For example, Chinese fonts typically only support normal
and bold
, while English fonts may support normal
, bold
, and 100~900
. We provide two sets of font weight classes:
- Named weight classes:
Class Name | Weight Range | Purpose |
---|---|---|
_fw-normal |
400-500 | Normal weight for body text |
_fw-bold |
600-700 | Medium bold for headings/emphasis |
_fw-bolder |
800-900 | Very bold for short titles/hero text |
_fw-lighter |
100-300 | Very light for subtitles/tech styles |
Class Name | Value | Range | Recommended Use |
---|---|---|---|
_fw-100 |
100 | lighter | Ultra-light for decorative text |
_fw-200 |
200 | lighter | Light for modern UI subtitles |
_fw-300 |
300 | lighter | Light emphasis for UI elements |
_fw-400 |
400 | normal | Default body text |
_fw-500 |
500 | normal | Slightly emphasized UI text |
_fw-600 |
600 | bold | Medium headings/navigation |
_fw-700 |
700 | bold | Classic bold headings |
_fw-800 |
800 | bolder | Very bold for logos |
_fw-900 |
900 | bolder | Maximum visual impact |
- Output
- HTML
-
(_fw-normal) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_fw-bold) y 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun. In theory, a solar nebula partitions a volume out of a molecular cloud by gravitational collapse, which begins to spin and flatten into a circumstellar disk, and then the planets grow out of that disk with the Sun.
-
Font Size
The framework provides two types of font sizes: named sizes and heading sizes.
Note: _fs-display=_fs-h1, _fs-title=_fs-h2, _fs-subtitle=_fs-h4, _fs-lead=_fs-h5, _fs-body=_fs-h6
Named Sizes
Named font sizes can indicate their scale based on their names, consistent with basic size naming conventions.
The values for font size and line height are typically multiples of 2 or 4, making it easier to align with other fixed-size elements.
Class Name | px | rem | Purpose |
---|---|---|---|
_fs-caption |
12px | 1.2rem | Small text for labels/captions |
_fs-body |
14px | 1.4rem | Base body text |
_fs-lead |
16px | 1.6rem | Lead paragraphs |
_fs-subtitle |
18px | 1.8rem | Subtitles |
_fs-title |
28px | 2.8rem | Article titles (2× body) |
_fs-display |
32px | 3.2rem | Large titles (2× lead) |
_fs-hero |
48px | 4.8rem | Hero section titles |
Class Name | px | rem | Purpose |
---|---|---|---|
_lh-caption |
18px | 1.8rem | Fixed for small text |
_lh-body |
24px | 2.4rem | Body text line height |
_lh-lead |
24px | 2.4rem | Lead paragraphs |
_lh-subtitle |
28px | 2.8rem | Subtitles |
_lh-title |
40px | 4rem | Main titles |
_lh-display |
44px | 4.4rem | Large titles |
_lh-hero |
60px | 6rem | Hero sections |
Font Size Class | Line Height Class | Line Height / Font Size |
---|---|---|
_fs-caption |
_lh-caption |
1.5 |
_fs-body |
_lh-body |
1.714 |
_fs-lead |
_lh-lead |
1.5 |
_fs-subtitle |
_lh-subtitle |
1.56 |
_fs-title |
_lh-title |
1.43 |
_fs-display |
_lh-display |
1.375 |
_fs-hero |
_lh-hero |
1.25 |
- Output
- HTML
-
(_fs-caption) The United States of America is a diverse and influential federal republic in North America.(_fs-body) The United States of America is a diverse and influential federal republic in North America.(_fs-lead) The United States of America is a diverse and influential federal republic in North America.(_fs-subtitle) The United States of America is a diverse and influential federal republic in North America.(_fs-title) The United States of America is a diverse and influential federal republic in North America.(_fs-title) The United States of America is a diverse and influential federal republic in North America.(_fs-hero) The United States of America is a diverse and influential federal republic in North America.
-
Heading Sizes
The heading font sizes correspond to the h1~h6 tags:
Class Name | px | rem | Notes |
---|---|---|---|
_fs-h1 |
32px | 3.2rem | Page titles (2× lead) |
_fs-h2 |
28px | 2.8rem | Article titles (2× body) |
_fs-h3 |
24px | 2.4rem | Section headings |
_fs-h4 |
18px | 1.8rem | Subheadings |
_fs-h5 |
16px | 1.6rem | Lead-in text |
_fs-h6 |
14px | 1.4rem | Smallest headings |
Class Name | Ratio | Purpose |
---|---|---|
_lh-h1 |
1.25 | Compact for main titles |
_lh-h2 |
1.357 | Relaxed for readability |
_lh-h3 |
1.417 | For longer subheadings |
_lh-h4 |
1.444 | Balanced spacing |
_lh-h5 |
1.5 | Body-like clarity |
_lh-h6 |
1.57 | For fine details |
- Output
- HTML
-
(_fs-h1) The United States of America is a diverse and influential federal republic in North America.(_fs-h2) The United States of America is a diverse and influential federal republic in North America.(_fs-h3) The United States of America is a diverse and influential federal republic in North America.(_fs-h4) The United States of America is a diverse and influential federal republic in North America.(_fs-h5) The United States of America is a diverse and influential federal republic in North America.(_fs-h6) The United States of America is a diverse and influential federal republic in North America.
-
General Line Heights
we provide another set of line height utility classes for plain text layout, which can be used with any font size but may not align to exact pixels.
Class Name | Ratio | Purpose |
---|---|---|
_lh-sm |
1.268 | Compact for small text |
_lh-md |
1.5 | Standard for short paragraphs |
_lh-lg |
1.78 | Spacious for long reading |
- Output
- HTML
-
(_lh-md) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.(_lh-md) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.(_lh-lg) By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun. In theory, a solar nebula partitions a volume out of a molecular cloud by gravitational collapse, which begins to spin and flatten into a circumstellar disk, and then the planets grow out of that disk with the Sun.(_lh-sm) A nebula contains gas, ice grains, and dust (including primordial nuclides). According to nebular theory, planetesimals formed by accretion, with the primordial Earth being estimated as likely taking anywhere from 70 to 100 million years to form.
-