mirror of
https://github.com/google/pebble.git
synced 2025-06-03 16:53:11 +00:00
Import the pebble dev site into devsite/
This commit is contained in:
Katharine Berry
parent
3b92768480
commit
527858cf4c
1359 changed files with 265431 additions and 0 deletions
193
devsite/source/_guides/app-resources/system-fonts.md
Normal file
193
devsite/source/_guides/app-resources/system-fonts.md
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
---
|
||||
# Copyright 2025 Google LLC
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
title: System Fonts
|
||||
description: |
|
||||
A complete list of all the system fonts available for use in Pebble projects.
|
||||
guide_group: app-resources
|
||||
order: 8
|
||||
---
|
||||
|
||||
The tables below show all the system font identifiers available in the Pebble
|
||||
SDK, sorted by family. A sample of each is also shown.
|
||||
|
||||
## Available System Fonts
|
||||
|
||||
### Raster Gothic
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>Available Font Keys</th>
|
||||
<th>Preview</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>FONT_KEY_GOTHIC_14</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_14_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_14_BOLD</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_14_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_18</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_18_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_18_BOLD</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_18_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_24</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_24_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_24_BOLD</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_24_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_28</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_28_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_GOTHIC_28_BOLD</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/gothic_28_bold_preview.png"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### Bitham
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>Available Font Keys</th>
|
||||
<th>Preview</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>FONT_KEY_BITHAM_30_BLACK</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/bitham_30_black_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_BITHAM_34_MEDIUM_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/bitham_34_medium_numbers_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_BITHAM_42_BOLD</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/bitham_42_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_BITHAM_42_LIGHT</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/bitham_42_light_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_BITHAM_42_MEDIUM_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/bitham_42_medium_numbers_preview.png"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### Roboto/Droid Serif
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>Available Font Keys</th>
|
||||
<th>Preview</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>FONT_KEY_ROBOTO_CONDENSED_21</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/roboto_21_condensed_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_ROBOTO_BOLD_SUBSET_49</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/roboto_49_bold_subset_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_DROID_SERIF_28_BOLD</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/droid_28_bold_preview.png"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### LECO
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>Available Font Keys</th>
|
||||
<th>Preview</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>FONT_KEY_LECO_20_BOLD_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_20_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_LECO_26_BOLD_NUMBERS_AM_PM</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_26_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_LECO_28_LIGHT_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_28_light_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_LECO_32_BOLD_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_32_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_LECO_36_BOLD_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_36_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_LECO_38_BOLD_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_38_bold_preview.png"/></td>
|
||||
</tr><tr>
|
||||
<td><code>FONT_KEY_LECO_42_NUMBERS</code></td>
|
||||
<td><img src="/assets/images/guides/app-resources/fonts/leco_42_preview.png"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Obtaining System Font Files
|
||||
|
||||
The following system fonts are available to developers in the SDK can be found
|
||||
online for use in design mockups:
|
||||
|
||||
* [Raster Gothic](http://www.marksimonson.com/) - By Mark Simonson
|
||||
|
||||
* [Gotham (Bitham)](http://www.typography.com/fonts/gotham/overview/) -
|
||||
Available from Typography.com
|
||||
|
||||
* [Droid Serif](https://www.google.com/fonts/specimen/Droid+Serif) - Available
|
||||
from Google Fonts
|
||||
|
||||
* [LECO 1976](https://www.myfonts.com/fonts/carnoky/leco-1976/) - Available from
|
||||
Myfonts.com
|
||||
|
||||
|
||||
## Using Emoji Fonts
|
||||
|
||||
A subset of the built-in system fonts support the use of a set of emoji
|
||||
characters. These are the Gothic 24, Gothic 24 Bold, Gothic 18, and Gothic 18
|
||||
Bold fonts, but do not include the full range.
|
||||
|
||||
To print an emoji on Pebble, specify the code in a character string like the one
|
||||
shown below when using a ``TextLayer``, or ``graphics_draw_text()``:
|
||||
|
||||
```c
|
||||
text_layer_set_text(s_layer, "Smiley face: \U0001F603");
|
||||
```
|
||||
|
||||
An app containing a ``TextLayer`` displaying the above string will look similar
|
||||
to this:
|
||||
|
||||
|
||||
|
||||
The supported characters are displayed below with their corresponding unicode
|
||||
values.
|
||||
|
||||
<img style="align: center;" src="/assets/images/guides/pebble-apps/resources/emoji1.png"/>
|
||||
|
||||
### Deprecated Emoji Symbols
|
||||
|
||||
The following emoji characters are no longer available on the Aplite platform.
|
||||
|
||||
<img style="align: center;" src="/assets/images/guides/pebble-apps/resources/emoji-unsupported.png"/>
|
||||
Loading…
Add table
Add a link
Reference in a new issue