journal.pl/remote-assets/SBSansScreen_demo.html

109 lines
8.0 KiB
HTML
Raw Normal View History

2022-11-27 16:34:37 +03:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=1252"/>
<!--
These webfonts were purchased at www.ParaType.com
You can purchase them too. Please don't steal them.
Please don't remove this notice. Thanks.
-->
<title>Font Face Demo</title>
<link rel="stylesheet" href="SBSansScreen_stylesheet.css" type="text/css" charset="utf-8">
<style type="text/css" media="screen">
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
.SBSansScreenRegular {
font-family: 'SBSansScreenRegular';
font-weight: normal;
font-style: normal;
color:#000000;
}
.caption {
font-size: 18px;
color:#666666;
}
.FontName {
font-size: 60px;
}
.CopyrightFont {
font-size: 10px;
}
#container {
width: 900px;
margin-left: auto;
margin-right: auto;
overflow: none;
}
.samplebox {
white-space:wrap;
margin-top:10px;
margin-bottom: 0px;
}
</style>
<script type="text/javascript">
fsize = 24
function less()
{
if (fsize > 2) {
fsize = fsize-1;
p = document.getElementById('sample');
p.style.fontSize = fsize + "px";
document.getElementById('stext').value = fsize + "px";
}
}
function more()
{
if (fsize < 100) {
fsize = fsize+1;
setSize ()
}
}
function setSize ()
{
p = document.getElementById('sample');
p.style.fontSize = fsize + "px";
document.getElementById('stext').value = fsize + "px";
}
function changeFSize()
{
tsize = document.getElementById('stext').value;
fsize = parseInt (tsize);
setSize ();
return false;
}
</script>
</head>
<body>
<div id="container">
<p class="caption">
Font: <br>
<span class="SBSansScreenRegular samplebox" style="font-size:60px; color:#990000">
SB Sans Screen</span></p>
<p class="caption">
Sample Text:</p>
<p class="SBSansScreenRegular samplebox" style="font-size:28px">
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.<br>&#1070;&#1085;&#1099;&#1081; &#1076;&#1080;&#1088;&#1077;&#1082;&#1090;&#1086;&#1088; &#1094;&#1077;&#1083;&#1080;&#1082;&#1086;&#1084; &#1089;&#1078;&#1077;&#1074;&#1072;&#1083; &#1074;&#1077;&#1089;&#1100; &#1086;&#1073;&#1098;&#1105;&#1084; &#1087;&#1088;&#1086;&#1076;&#1091;&#1082;&#1094;&#1080;&#1080; &#1092;&#1091;&#1085;&#1076;&#1091;&#1082;&#1072; (&#1090;&#1086;&#1074;&#1072;&#1088;&#1072; &#1076;&#1077;&#1092;&#1080;&#1094;&#1080;&#1090;&#1085;&#1086;&#1075;&#1086; &#1080;&#160;&#1076;&#1077;&#1083;&#1080;&#1082;&#1072;&#1090;&#1077;&#1089;&#1085;&#1086;&#1075;&#1086;), &#1080;&#1076;&#1103; &#1101;&#1085;&#1077;&#1088;&#1075;&#1080;&#1095;&#1085;&#1086; &#1095;&#1077;&#1088;&#1077;&#1079; &#1093;&#1088;&#1091;&#1089;&#1090;&#1103;&#1097;&#1080;&#1081; &#1082;&#1072;&#1084;&#1099;&#1096;.</p>
<p class="caption">
<form onsubmit="return changeFSize();">
Character Set: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="-" onClick="less()"> &nbsp;&nbsp;<input id="stext" type="text" value="24px" style="width:40px"> &nbsp;&nbsp;<input type="button" value="+" onClick="more()"></p>
</form>
<p id="sample" class="SBSansScreenRegular samplebox" style="font-size:24px;">
&#33; &#34; &#35; &#36; &#37; &#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; &#48; &#49; &#50; &#51; &#52; &#53; &#54; &#55; &#56; &#57; &#58; &#59; &#60; &#61; &#62; &#63; &#64; &#65; &#66; &#67; &#68; &#69; &#70; &#71; &#72; &#73; &#74; &#75; &#76; &#77; &#78; &#79; &#80; &#81; &#82; &#83; &#84; &#85; &#86; &#87; &#88; &#89; &#90; &#91; &#92; &#93; &#94; &#95; &#96; &#97; &#98; &#99; &#100; &#101; &#102; &#103; &#104; &#105; &#106; &#107; &#108; &#109; &#110; &#111; &#112; &#113; &#114; &#115; &#116; &#117; &#118; &#119; &#120; &#121; &#122; &#123; &#124; &#125; &#126; &#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255; &#256; &#257; &#258; &#259; &#260; &#261; &#262; &#263; &#264; &#265; &#266; &#267; &#268; &#269; &#270; &#271; &#272; &#273; &#274; &#275; &#278; &#279; &#280; &#281; &#282; &#283; &#284; &#285; &#286; &#287; &#288; &#289; &#290; &#291; &#292; &#293; &#294; &#295; &#298; &#299; &#302; &#303; &#304; &#305; &#308; &#309; &#310; &#311; &#313; &#314; &#315; &#316; &#317; &#318; &#319; &#320; &#321; &#322; &#323; &#324; &#325; &#326; &#327; &#328; &#332; &#333; &#336; &#337; &#338; &#339; &#340; &#341; &#342; &#343; &#344; &#345; &#346; &#347; &#348; &#349; &#350; &#351; &#352; &#353; &#354; &#355; &#356; &#357; &#362; &#363; &#364; &#365; &#366; &#367; &#368; &#369; &#370; &#371; &#376; &#377; &#378; &#379; &#380; &#381; &#382; &#399; &#402; &#477; &#486; &#487; &#536; &#537; &#538; &#539; &#567; &#601; &#700; &#710; &#711; &#728; &#729; &#730; &#731; &#732; &#733; &#769; &#916; &#937; &#960; &#1025; &#1026; &#1027; &#1028; &#1029; &#1030; &#1031; &#1032; &#1033; &#1034; &#1035; &#1036; &#1038; &#1039; &#1040; &#1041; &#1042; &#1043; &#1044; &#1045; &#1046; &#1047; &#1048; &#1049; &#1050; &#1051; &#1052; &#1053; &#1054; &#1055; &#1056; &#1057; &#1058; &#1059; &#1060; &#1061; &#1062; &#1063; &#1064; &#1065; &#1066; &#1067; &#1068; &#1069; &#1070; &#1071; &#1072; &#1073; &#1074; &#1075; &#1076; &#1077; &#1078; &#1079; &#1080; &#1081; &#1082; &#1083; &#1084; &#1085; &#1086; &#1087; &#1088; &#1089; &#1090; &#1091; &#1092; &#1093; &#1094; &#1095; &#1096; &#1097; &#1098; &#1099; &#1100; &#1101; &#1102; &#1103; &#1105; &#1106; &#1107; &#1108; &#1109; &#1110; &#1111; &#1112; &#1113; &#1114; &#1115; &#1116; &#1118; &#1119; &#1168; &#1169; &#1170; &#1171; &#1178; &#1179; &#1186; &#1187; &#1198; &#1199; &#1200; &#1201; &#1210; &#1211; &#1216; &#1231; &#1240; &#1241; &#1256; &#1257; &#7838; &#8210; &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8224; &#8225; &#8226; &#8230; &#8240; &#8249; &#8250; &#8260; &#8304; &#8308; &#8309; &#8310; &#8311; &#8312; &#8313; &#8320; &#8321; &#8322; &#8323; &#8324; &#8325; &#8326; &#8327; &#8328; &#8329; &#8364; &#8372; &#8376; &#8381; &#8470; &#8480; &#8482; &#8531; &#8532; &#8539; &#8540; &#8541; &#8542; &#8722; &#8734; &#8776; &#8800; &#8804; &#8805; &#9674; &#62470; &#62471; &#62472; &#62473; &#62474; &#62475; &#62476; &#62477; &#62478; &#62688; &#62689; &#62690; &#62691; &#62692; &#62693; &#62694; &#62695; &#62696; &#62697; &#62700; &#62701; &#62702; &#62703; &#62714; &#62715; &#62716; &#62717; &#62963; &#63061; &#63062; &#63063; &#63064; &#63065; &#63066; &#63067; &#63068; &#63069; &#63070; &#63073; &#63074; &#63075; &#63076; &#63077; &#63078; &#63079; &#63080; &#63081; &#63082; &#63162; &#63163; &#63164; &#63171; &#63177; &#63178; &#63179; &#63182; &#63183; &#63184; &#63185; &#63188; &#64256; &#64257; &#64258; &#64259; &#64260; </p>
<p class="CopyrightFont">
&#169; ParaType, 2019. All rights reserved.<br>All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and<br>distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.<br>&#1056;&#1091;&#1089;&#1089;&#1082;&#1072;&#1103; &#1087;&#1072;&#1085;&#1075;&#1088;&#1072;&#1084;&#1084;&#1072; &#1080;&#1079; &#1082;&#1085;&#1080;&#1075;&#1080; &#1042;.&#160;&#1042;.&#160;&#1064;&#1072;&#1093;&#1080;&#1076;&#1078;&#1072;&#1085;&#1103;&#1085;&#1072; &#171;&#1057;&#1086;&#1083;&#1086; &#1085;&#1072;&#160;&#1082;&#1083;&#1072;&#1074;&#1080;&#1072;&#1090;&#1091;&#1088;&#1077;&#187;</p> </div>
</body>
</html>