Не просто текст

Бухвалова Юлия, LiveJournal

Об авторе

Бухвалова Юлия LiveJournal

Предыдущие материалы по теме

Не просто текст

Темы

Привет Русский ねぇ。 Японский هی Персидский Γεια σας Греческий

В начале было слово

ASCII

American Standard Code for Information Interchange

ASCII
.0 .1 .2 .3 .4 .5 .6 .7 .8 .9 .A .B .C .D .E .F
0. NUL SOH STX ETX EOT ENQ ACK BEL BS HT LF VT FF CR SO SI
1. DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC FS GS RS US
2.     ! " # $ % & ' ( ) * + , - . /
3. 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4. @ A B C D E F G H I J K L M N O
5. P Q R S T U V W X Y Z [ \ ] ^ _
6. ` a b c d e f g h i j k l m n o
7. p q r s t u v w x y z { | } ~ DEL

Расширенные кодировки

Windows-1251
.0 .1 .2 .3 .4 .5 .6 .7 .8 .9 .A .B .C .D .E .F
8. Ђ
402
Ѓ
403

201A
ѓ
453

201E

2026

2020

2021

20AC

2030
Љ
409

2039
Њ
40A
Ќ
40C
Ћ
40B
Џ
40F
9. ђ
452

2018

2019

201C

201D

2022

2013

2014

2122
љ
459

203A
њ
45A
ќ
45C
ћ
45B
џ
45F
A.  
A0
Ў
40E
ў
45E
Ј
408
¤
A4
Ґ
490
¦
A6
§
A7
Ё
401
©
A9
Є
404
«
AB
¬
AC
­
AD
®
AE
Ї
407
B. °
B0
±
B1
І
406
і
456
ґ
491
µ
B5

B6
·
B7
ё
451

2116
є
454
»
BB
ј
458
Ѕ
405
ѕ
455
ї
457
C. А
410
Б
411
В
412
Г
413
Д
414
Е
415
Ж
416
З
417
И
418
Й
419
К
41A
Л
41B
М
41C
Н
41D
О
41E
П
41F
D. Р
420
С
421
Т
422
У
423
Ф
424
Х
425
Ц
426
Ч
427
Ш
428
Щ
429
Ъ
42A
Ы
42B
Ь
42C
Э
42D
Ю
42E
Я
42F
E. а
430
б
431
в
432
г
433
д
434
е
435
ж
436
з
437
и
438
й
439
к
43A
л
43B
м
43C
н
43D
о
43E
п
43F
F. р
440
с
441
т
442
у
443
ф
444
х
445
ц
446
ч
447
ш
448
щ
449
ъ
44A
ы
44B
ь
44C
э
44D
ю
44E
я
44F
KOI8-R
.0 .1 .2 .3 .4 .5 .6 .7 .8 .9 .A .B .C .D .E .F
8.
2500

2502

250C

2510

2514

2518

251C

2524

252C

2534

253C

2580

2584

2588

258C

2590
9.
2591

2592

2593

2320

25A0

2219

221A

2248

2264

2265
 
A0

2321
°
B0
²
B2
·
B7
÷
F7
A.
2550

2551

2552
ё
451

2553

2554

2555

2556

2557

2558

2559

255A

255B

255C

255D

255E
B.
255F

2560

2561
Ё
401

2562

2563

2564

2565

2566

2567

2568

2569

256A

256B

256C
©
A9
C. ю
44E
а
430
б
431
ц
446
д
434
е
435
ф
444
г
433
х
445
и
438
й
439
к
43A
л
43B
м
43C
н
43D
о
43E
D. п
43F
я
44F
р
440
с
441
т
442
у
443
ж
436
в
432
ь
44C
ы
44B
з
437
ш
448
э
44D
щ
449
ч
447
ъ
44A
E. Ю
42E
А
410
Б
411
Ц
426
Д
414
Е
415
Ф
424
Г
413
Х
425
И
418
Й
419
К
41A
Л
41B
М
41C
Н
41D
О
41E
F. П
41F
Я
42F
Р
420
С
421
Т
422
У
423
Ж
416
В
412
Ь
42C
Ы
42B
З
417
Ш
428
Э
42D
Щ
429
Ч
427
Ъ
42A
№ЯФкЯЬЯЯТвСкЯзСЮЩХ ЫЯЮУХЮдвЩвеХд СЮСЬЩдЩоХгЫЩЪ ЧЩвЯЩЮдХЧвСдЯв. ыЯЧЮЩдЩзЮСб гЯгдСзЬбРнСб ЧХЮХдЩоХгЫЩ вХФеУЩвеХд ФеСЬЩкЭ, одЯ аЯкжХ аЯФдзХвФЩЬЯги ЭЮЯЧЯоЩгЬХЮЮйЭЩ ЯайдСЭЩ. ц.ћЩЬХв, ч.чХдХ, ц.ћЬХЧХЬЩ Щ с.ћЬХЧХЬЩ зйвСкЩЬЩ дЩаЯЬЯЧЩоХгЫеР СЮдЩдХке ЫЬСггЩУЩкЭС Щ вЯЭСЮдЩкЭС оХвХк авЯдЩзЯаЯгдСзЬХЮЩХ ЩгЫеггдзС "ЮСЩзЮЯЧЯ" Щ "гХЮдЩЭХЮдСЬиЮЯЧЯ", аЯмдЯЭе СггЯУЩСУЩб ФСХд ШвСЭЯзйЪ ЫЯЭаЬХЫг, аЯгзбнХЮЮйЪ ФЩЬЭеЮгЫЯЭе ТЯЧе хЮЫЩ,. эЯУкй, ѓРЮпУкй Щ ФвеЧЩХ гоЩдСЬЩ, одЯ ЭХФЩСЭЩЫг ФХЫЬСвЩвеХд гСвЯг. чСЬСЫдЩЫС ЮСФЫегйзСХд ЦвЯЮд. №ЯмдЯЭе ЭЮЯЧЩХ ЧХЯЬЯЧЩ гоЩдСРд, одЯ вСгдзЯвХЮЩХ аСвСЬЬХЬиЮЯ.

Unicode

Универсальная кодировка

История

Unicode over 60 percent of the web (Google, 2012)

OpenType

Расширяемый шрифтовой формат

Преимущества

Форматы

Кастомные шрифты

Пример кода

@font-face {
  font-family: MyFont;
  src: local('MyFont'),
    url('path/MyFont.woff2') format('woff2'),
    url('path/MyFont.woff') format('woff');
}
body {
  font-family: MyFont, Helvetica, Arial, sans-serif;
}

Где брать?

Проблема кастомных шрифтов

Вариативные шрифты

Настройки шрифта

Низкоуровневые настройки

font-feature-settings: "liga" on, "zero" on;

Вариации

font-variation-settings: "ital" 1;
Ital
Ital

Стандартные настройки

Fusce semper id arcu id porttitor. Etiam sed quam vel ante laoreet varius at sed purus. Morbi commodo est nec felis tempor sollicitudin. Aliquam gravida nunc quis vestibulum volutpat. Sed quis dui sodales, congue risus vel, blandit lectus. In porta odio purus, id posuere tortor viverra vel. Etiam nunc quam, rutrum non diam eu, cursus tincidunt lorem.

Move
is life

Кастомные настройки

Пример кода

font-variation-settings: "BLDA" 913.8, "BLDB" 162.8, "SKLB" 1000;
Text Text Text Text Text Text
caniuse.com/#feat=variable-fonts

Использование

@font-face {
  font-family: 'MyFontVariable';
  src: url('source-sans-variable.woff2') format('woff2');
  font-weight: 1 999;
}
@font-face {
  font-family: 'MyFont';
  src: url('source-sans-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-black.woff2') format('woff2');
  font-weight: 900;
}
html {
  font-family: 'MyFont', sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'MyFontVariable', sans-serif;
  }
}

Как использовать вариативные шрифты в реальном мире

Плюсы

Минусы

Песочницы

Бесплатные шрифты

Цветные шрифты

Text Text Text Text
Text
😃 🐙 🎵 💃
Emoji Proposals
Date Title Authors
2000-04-26 NTT DoCoMo Pictographs Graham Asher (Symbian)
2006-11-01 Symbols (scope extension) Mark Davis (Google)
2007-08-03 Working Draft Proposal for Encoding Emoji Symbols Kat Momoi, Mark Davis, Markus Scherer (Google)
2007-08-09 Symbols draft resolution Mark Davis (Google)
2007-09-18 Japanese TV Symbols (ARIB) Michel Suignard (Microsoft)
Emoji Proposals
Date Title Authors
2000-04-26 NTT DoCoMo Pictographs Graham Asher (Symbian)
2006-11-01 Symbols (scope extension) Mark Davis (Google)
2007-08-03 Working Draft Proposal for Encoding Emoji Symbols Kat Momoi, Mark Davis, Markus Scherer (Google)
2007-08-09 Symbols draft resolution Mark Davis (Google)
2007-09-18 Japanese TV Symbols (ARIB) Michel Suignard (Microsoft)
2009-01-30 Emoji Symbols Proposed for New Encoding Markus Scherer, Mark Davis, Kat Momoi, Darick Tong (Google);
Yasuo Kida, Peter Edberg (Apple)
2009-03-05 Proposal for Encoding Emoji Symbols
2010-04-27 Emoji Symbols: Background Data
2011-02-15 Wingdings and Webdings Symbols Michel Suignard

Почитать

Text Text Text Text

Форматы

Формат Растр Вектор
SBIX (Apple) ✔︎
CBDT/CBLC (Google) ✔︎
COLR/CPAL (Microsoft) ✔︎
SVG Open Type (Mozilla/Adobe) ✔︎ ✔︎

Поддержка браузерами

Формат
SBIX (Apple) ✔︎ ✔︎ ✔︎
CBDT/CBLC (Google) ✔︎ ✔︎
COLR/CPAL (Microsoft) ✔︎ Win 8.1 ✔︎ ✔︎ ✔︎
SVG Open Type (Mozilla/Adobe) ✔︎ ✔︎ ✔︎ MacOS 10.14

Поддержка приложениями Adobe

Формат Поддерживается
SBIX (Apple) ✔︎ AI CC 2018+, PS CC 2017+
CBDT/CBLC (Google)
COLR/CPAL (Microsoft)
SVG Open Type (Mozilla/Adobe) ✔︎ AI CC 2018+, PS CC 2017+

Примеры шрифтов

Использование

Браузер без поддержки

.myFancyLetters {
  font-family: 'Gilbert';
}
@supports (-webkit-background-clip: text) {
  .myFancyLetters {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background: linear-gradient(...);
  }
}

Браузер c поддержкой

Используем ChromaCheck

.chromacheck-svg .myFancyLetters {
  background: none;
}

Слоеный шрифт

Бесплатные шрифты

Aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur

sed quia non ut enim ad minima eos numquam eius modi tempora incidunt, unde omnis iste natus error sit voluptatem accusantium sequi doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur

That's all, folks!

Вопросы?