docs/bevy/examples/ui/text/font_query.rs 10.3 K · 252 lines · raw · history

1 //! This example demonstrates how to use font weights, widths and styles.
2
3 use bevy::prelude::*;
4
5 use bevy::text::FontSource;
6
7 fn main() {
8 App::new()
9 .add_plugins(DefaultPlugins)
10 .add_systems(Startup, setup)
11 .run();
12 }
13
14 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
15 let family = FontSource::from(asset_server.load("fonts/MonaSans-VariableFont.ttf"));
16
17 commands.spawn(Camera2d);
18
19 commands.spawn((
20 Node {
21 flex_direction: FlexDirection::Column,
22 align_self: AlignSelf::Center,
23 justify_self: JustifySelf::Center,
24 align_items: AlignItems::Center,
25 padding: px(16.).all(),
26 row_gap: px(16.),
27 ..default()
28 },
29 children![
30 (
31 Text::new("Font Weights, Widths & Styles"),
32 TextFont {
33 font: family.clone(),
34 font_size: FontSize::Px(32.0),
35 ..default()
36 },
37 Underline,
38 ),
39 (
40 // Two columns side-by-side
41 Node {
42 flex_direction: FlexDirection::Row,
43 column_gap: px(32.),
44 ..default()
45 },
46 children![
47 (
48 // Left column: Weights
49 Node {
50 flex_direction: FlexDirection::Column,
51 padding: px(8.).all(),
52 row_gap: px(8.),
53 ..default()
54 },
55 children![
56 (
57 Text::new("Weight 100 (Thin)"),
58 TextFont {
59 font: family.clone(),
60 weight: FontWeight::THIN,
61 ..default()
62 },
63 ),
64 (
65 Text::new("Weight 200 (Extra Light)"),
66 TextFont {
67 font: family.clone(),
68 weight: FontWeight::EXTRA_LIGHT,
69 ..default()
70 },
71 ),
72 (
73 Text::new("Weight 300 (Light)"),
74 TextFont {
75 font: family.clone(),
76 weight: FontWeight::LIGHT,
77 ..default()
78 },
79 ),
80 (
81 Text::new("Weight 400 (Normal)"),
82 TextFont {
83 font: family.clone(),
84 weight: FontWeight::NORMAL,
85 ..default()
86 },
87 ),
88 (
89 Text::new("Weight 500 (Medium)"),
90 TextFont {
91 font: family.clone(),
92 weight: FontWeight::MEDIUM,
93 ..default()
94 },
95 ),
96 (
97 Text::new("Weight 600 (Semibold)"),
98 TextFont {
99 font: family.clone(),
100 weight: FontWeight::SEMIBOLD,
101 ..default()
102 },
103 ),
104 (
105 Text::new("Weight 700 (Bold)"),
106 TextFont {
107 font: family.clone(),
108 weight: FontWeight::BOLD,
109 ..default()
110 },
111 ),
112 (
113 Text::new("Weight 800 (Extra Bold)"),
114 TextFont {
115 font: family.clone(),
116 weight: FontWeight::EXTRA_BOLD,
117 ..default()
118 },
119 ),
120 (
121 Text::new("Weight 900 (Black)"),
122 TextFont {
123 font: family.clone(),
124 weight: FontWeight::BLACK,
125 ..default()
126 },
127 ),
128 ]
129 ),
130 (
131 // Right column: Widths
132 Node {
133 flex_direction: FlexDirection::Column,
134 padding: px(8.).all(),
135 row_gap: px(8.),
136 ..default()
137 },
138 children![
139 (
140 Text::new("FontWidth::ULTRA_CONDENSED"),
141 TextFont {
142 font: family.clone(),
143 width: FontWidth::ULTRA_CONDENSED,
144 ..default()
145 },
146 ),
147 (
148 Text::new("FontWidth::EXTRA_CONDENSED"),
149 TextFont {
150 font: family.clone(),
151 width: FontWidth::EXTRA_CONDENSED,
152 ..default()
153 },
154 ),
155 (
156 Text::new("FontWidth::CONDENSED"),
157 TextFont {
158 font: family.clone(),
159 width: FontWidth::CONDENSED,
160 ..default()
161 },
162 ),
163 (
164 Text::new("FontWidth::SEMI_CONDENSED"),
165 TextFont {
166 font: family.clone(),
167 width: FontWidth::SEMI_CONDENSED,
168 ..default()
169 },
170 ),
171 (
172 Text::new("FontWidth::NORMAL"),
173 TextFont {
174 font: family.clone(),
175 width: FontWidth::NORMAL,
176 ..default()
177 },
178 ),
179 (
180 Text::new("FontWidth::SEMI_EXPANDED"),
181 TextFont {
182 font: family.clone(),
183 width: FontWidth::SEMI_EXPANDED,
184 ..default()
185 },
186 ),
187 (
188 Text::new("FontWidth::EXPANDED"),
189 TextFont {
190 font: family.clone(),
191 width: FontWidth::EXPANDED,
192 ..default()
193 },
194 ),
195 (
196 Text::new("FontWidth::EXTRA_EXPANDED"),
197 TextFont {
198 font: family.clone(),
199 width: FontWidth::EXTRA_EXPANDED,
200 ..default()
201 },
202 ),
203 (
204 Text::new("FontWidth::ULTRA_EXPANDED"),
205 TextFont {
206 font: family.clone(),
207 width: FontWidth::ULTRA_EXPANDED,
208 ..default()
209 },
210 ),
211 ],
212 ),
213 (
214 // Right column: Style
215 Node {
216 flex_direction: FlexDirection::Column,
217 padding: px(8.).all(),
218 row_gap: px(8.),
219 ..default()
220 },
221 children![
222 (
223 Text::new("FontStyle::Normal"),
224 TextFont {
225 font: family.clone(),
226 style: FontStyle::Normal,
227 ..default()
228 },
229 ),
230 (
231 Text::new("FontStyle::Oblique"),
232 TextFont {
233 font: family.clone(),
234 style: FontStyle::Oblique(None),
235 ..default()
236 },
237 ),
238 (
239 Text::new("FontStyle::Italic"),
240 TextFont {
241 font: family.clone(),
242 style: FontStyle::Italic,
243 ..default()
244 },
245 ),
246 ]
247 ),
248 ]
249 ),
250 ],
251 ));
252 }