header gbu
parent
d3a0916817
commit
72c6fbe0b9
|
|
@ -1,90 +0,0 @@
|
|||
<div class="footer layout-corral" *ngIf="isRusPage">
|
||||
<div class="block">
|
||||
<div class="logo">
|
||||
<img src="assets/images/logo_vniigaz_wt_280x110.svg" alt="">
|
||||
<div *ngIf="!isLoggedIn" class="footer-login">
|
||||
<a (click)="login()">Вход в личный кабинет</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<div>
|
||||
<a href="tel:+74986574518" dir="ltr">+7 (498) 657-45-18</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:info@vniigaz-cert.ru">info@vniigaz-cert.ru</a>
|
||||
</div>
|
||||
<div>
|
||||
<span dir="ltr">
|
||||
142717, Российская Федерация, Московская область, г. Видное, посёлок Развилка, ВНИИГАЗ
|
||||
</span>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<a href="https://vk.com/vniigazcert" target="_blank">
|
||||
<img src="assets/images/icons/vk_white_29x28.svg" alt="">
|
||||
</a>
|
||||
<a href="https://ok.ru/group/59746745647125" target="_blank">
|
||||
<img src="assets/images/icons/ok_orange_28x28.svg" alt="">
|
||||
</a>
|
||||
<a href="https://dzen.ru/vniigazcert" target="_blank">
|
||||
<img src="assets/images/icons/zen_black_28x28.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="copyright">
|
||||
<div>
|
||||
© 1998–{{year}} ЧУ СЦ ВНИИГАЗ-Сертификат
|
||||
</div>
|
||||
<div class="nir">
|
||||
<a href="https://nirgroup.ru">Работает на платформе НИР</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer layout-corral" *ngIf="!isRusPage">
|
||||
<div class="block">
|
||||
<div class="logo">
|
||||
<img src="assets/images/logo_vniigaz_wt_280x110.svg" alt="">
|
||||
<!-- <div *ngIf="!isLoggedIn" class="footer-login">
|
||||
<a (click)="login()">Вход в личный кабинет</a>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="contact">
|
||||
<div>
|
||||
<a href="tel:+74986574518" dir="ltr">+7 (498) 657-45-18</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:info@vniigaz-cert.ru">info@vniigaz-cert.ru</a>
|
||||
</div>
|
||||
<div>
|
||||
<span dir="ltr">
|
||||
VNIIGAZ, Razvilka settl., Vidnoye, Moscow region, Russian Federation, 142717
|
||||
</span>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<a href="https://vk.com/vniigazcert" target="_blank">
|
||||
<img src="assets/images/icons/vk_white_29x28.svg" alt="">
|
||||
</a>
|
||||
<a href="https://ok.ru/group/59746745647125" target="_blank">
|
||||
<img src="assets/images/icons/ok_orange_28x28.svg" alt="">
|
||||
</a>
|
||||
<a href="https://dzen.ru/vniigazcert" target="_blank">
|
||||
<img src="assets/images/icons/zen_black_28x28.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="copyright">
|
||||
<div>
|
||||
© 1998–{{year}} Private Institution Certification Center VNIIGAZ-Certificate
|
||||
</div>
|
||||
<div class="nir">
|
||||
<a href="https://nirgroup.ru">Powered by the NIR platform</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,18 +1,28 @@
|
|||
<div class="header layout-corral" [class.rootpage]="isRootPage">
|
||||
<a class="burger" (click)="openMobileMenu()">
|
||||
<ico *ngIf="!isRootPage" ico="burger_blue_40dp" [size]="36"></ico>
|
||||
<ico *ngIf="isRootPage" ico="burger_white_40dp" [size]="36"></ico>
|
||||
</a>
|
||||
<a [routerLink]="rootPage?.link" class="logo">
|
||||
<img *ngIf="!isRootPage" src="assets/images/logo_vniigaz.svg" alt="ВНИИГАЗ">
|
||||
<img *ngIf="isRootPage" src="assets/images/logo_vniigaz_wt_280x110.svg" alt="ВНИИГАЗ">
|
||||
</a>
|
||||
<div class="header layout-corral">
|
||||
<div class="header-top-menu">
|
||||
<div class="header-top-menu-ref">
|
||||
<ico ico="frame_24" color="white" [size]="24"></ico>
|
||||
Версия для слабовидящих
|
||||
</div>
|
||||
<div class="header-top-menu-ref">
|
||||
<ico ico="search_24" color="white" [size]="24"></ico>
|
||||
Поиск
|
||||
</div>
|
||||
<div class="header-top-menu-ref">
|
||||
<ico ico="login_24" color="white" [size]="24"></ico>
|
||||
Вход
|
||||
</div>
|
||||
<locale></locale>
|
||||
</div>
|
||||
<div class="header-top-menu-contact">
|
||||
<div class="header-top-menu-left">
|
||||
|
||||
</div>
|
||||
<div class="header-top-menu-left">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pages-menu class="lvl-0"></pages-menu>
|
||||
|
||||
<div class="inline center header-right">
|
||||
<locale></locale>
|
||||
<a class="btn vnii" href="https://ais.vniigaz-cert.ru/" target="_blank" *ngIf="isRusPage">Личный кабинет (АИС СЦ)</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@
|
|||
|
||||
|
||||
* {
|
||||
font-family: "PT Sans";
|
||||
font-family: Golos;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
// li {
|
||||
|
|
@ -112,10 +116,10 @@ $pxxs:4px;
|
|||
--radius-1: 12px;
|
||||
--radius-2: 20px;
|
||||
--white: #ffffff;
|
||||
--light: #F6F6F6;
|
||||
--light: #F3F3F3;
|
||||
|
||||
|
||||
--prime: #0070BA;
|
||||
--prime: #00589D;
|
||||
--prime-hov: #005799;
|
||||
--prime-act: #004077;
|
||||
--prime-dis: #A1CAE5;
|
||||
|
|
@ -306,29 +310,6 @@ span.link {
|
|||
}
|
||||
|
||||
|
||||
header{
|
||||
.locale{
|
||||
position: relative;
|
||||
.locale-btn{
|
||||
display: inline-flex;
|
||||
}
|
||||
.dropdown{
|
||||
top: 27px;
|
||||
left: -120px;
|
||||
right: -110px;
|
||||
}
|
||||
img{
|
||||
height:18px;
|
||||
width:27px;
|
||||
object-fit: cover;
|
||||
border: 1px solid lightgray;
|
||||
&:hover{
|
||||
border-color: var(--prime-act);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px) {
|
||||
|
|
|
|||
|
|
@ -163,4 +163,52 @@
|
|||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBlack';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Black.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Black.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBold';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Bold.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Bold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebDemiBold';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_DemiBold.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_DemiBold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Golos';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Medium.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Medium.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Golos';
|
||||
src:
|
||||
url('../fonts/golos/Golos-Text_Regular.woff2') format('woff2'),
|
||||
url('../fonts/golos/Golos-Text_Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -6,8 +6,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
>.layout-corral{
|
||||
flex-basis: calc($layout-width + 2 * $pxl);
|
||||
padding: 0 $pxl;
|
||||
flex-basis: 1280px;
|
||||
display: flex;
|
||||
};
|
||||
.page-corral{
|
||||
|
|
@ -163,78 +162,7 @@ jumbotron{
|
|||
}
|
||||
|
||||
footer{
|
||||
background-color: var(--prime-act);
|
||||
align-self: stretch;
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 40px 0;
|
||||
margin-top: 48px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.block{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
.logo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
a{
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
:hover{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&>div{
|
||||
padding-bottom: 40px;
|
||||
max-width: fit-content;
|
||||
flex-basis: 400px;
|
||||
}
|
||||
>div{
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: -16px;
|
||||
>div {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.icons a{
|
||||
margin-right: 16px;
|
||||
}
|
||||
.menu{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--prime);
|
||||
}
|
||||
|
||||
.copyright{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
margin: 40px 0;
|
||||
.nir a{
|
||||
color: #6C6C6C;
|
||||
&:hover{
|
||||
color: #7c7c7c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -265,12 +193,6 @@ pages-menu-item{
|
|||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
.footer{
|
||||
padding: 40px 24px;
|
||||
.footer-login{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.space{
|
||||
.layout-corral{
|
||||
max-width: 100vw;
|
||||
|
|
|
|||
|
|
@ -9,91 +9,52 @@ pages-menu{
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
header{
|
||||
|
||||
background-color: var(--white);
|
||||
.header{
|
||||
height: 80px;
|
||||
margin: 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
pages-menu{
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
&:not(.lvl-0){
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item{
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
&.nav{
|
||||
&::after{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top:6px;
|
||||
background-image: url('../images/ico/chevron_right_prime_24.svg');
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
&.selected::after{
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
&:hover::after{
|
||||
background-image: url('../images/ico/chevron_right_prime_hov_24.svg');
|
||||
}
|
||||
}
|
||||
|
||||
>a{
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
&.parent,&.current{
|
||||
>a {border-color: var(--prime);}
|
||||
}
|
||||
|
||||
}
|
||||
.item.nav + pages-menu.selected.lvl-1{
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:100px;
|
||||
.header.layout-corral{
|
||||
flex-direction: column;
|
||||
|
||||
.header-top-menu{
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-bottom: 36px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-right{
|
||||
gap: $p;
|
||||
.locales-btn{
|
||||
drop-down {
|
||||
.on{
|
||||
svg{
|
||||
color:var(--dark)
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
height: 40px;
|
||||
background-color: var(--prime);
|
||||
.header-top-menu-ref{
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #FFF;
|
||||
gap: 8px;
|
||||
};
|
||||
locale{
|
||||
img{
|
||||
width: 27px;
|
||||
}
|
||||
.dropdown{
|
||||
left: -198px;
|
||||
top: 29px;
|
||||
img{
|
||||
border: 1px solid var(--second-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $pxxs;
|
||||
}
|
||||
.btn.vnii{
|
||||
border-radius: 0;
|
||||
padding: 8px 24px;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
.header-top-menu-contact{
|
||||
display: flex;
|
||||
height: 96px;
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
pages-menu{
|
||||
display: block
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -200,11 +161,7 @@ slider[side="left"]{
|
|||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
.header{
|
||||
pages-menu, >a.vnii, .header-right{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px){
|
||||
|
|
@ -219,45 +176,7 @@ slider[side="left"]{
|
|||
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
.header{
|
||||
.burger{
|
||||
display: none;
|
||||
}
|
||||
>pages-menu.top-menu{
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
pages-menu-item{
|
||||
font-size: 20px;
|
||||
.item{
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sub-menu:not(.current){
|
||||
display:none;
|
||||
}
|
||||
.sub-menu>pages-menu{
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
height: 68px;
|
||||
width: 100vw;
|
||||
background-color: var(--white);
|
||||
left: 0px;
|
||||
top: 104px;
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
z-index:1;
|
||||
pages-menu-item{
|
||||
pages-menu{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
slider-menu{
|
||||
pages-menu:not(.top-menu,.open){
|
||||
|
|
@ -372,29 +291,4 @@ right-content{
|
|||
|
||||
|
||||
|
||||
.rootpage{
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
width: 1360px;
|
||||
z-index: 1;
|
||||
.locale img{
|
||||
border: none;
|
||||
}
|
||||
pages-menu{
|
||||
a{
|
||||
color: #FFF;
|
||||
}
|
||||
.item.nav::after{
|
||||
background-image: url('../images/ico/chevron_right_white_24.svg') !important;
|
||||
}
|
||||
pages-menu{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.locale drop-down{
|
||||
svg{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBlack';
|
||||
src:
|
||||
url('Golos-Text_Black.woff2') format('woff2'),
|
||||
url('Golos-Text_Black.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!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=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
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="Golos-Text_Black.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebBlack {
|
||||
font-family: 'GolosTextWebBlack';
|
||||
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;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
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');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebBlack samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Black</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebBlack 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>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebBlack samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. 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>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebBold';
|
||||
src:
|
||||
url('Golos-Text_Bold.woff2') format('woff2'),
|
||||
url('Golos-Text_Bold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!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=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
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="Golos-Text_Bold.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebBold {
|
||||
font-family: 'GolosTextWebBold';
|
||||
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;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
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');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebBold samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Bold</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebBold 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>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebBold samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. 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>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebDemiBold';
|
||||
src:
|
||||
url('Golos-Text_DemiBold.woff2') format('woff2'),
|
||||
url('Golos-Text_DemiBold.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!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=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
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="Golos-Text_DemiBold.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebDemiBold {
|
||||
font-family: 'GolosTextWebDemiBold';
|
||||
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;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
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');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebDemiBold samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text DemiBold</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebDemiBold 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>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebDemiBold samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. 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>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebMedium';
|
||||
src:
|
||||
url('Golos-Text_Medium.woff2') format('woff2'),
|
||||
url('Golos-Text_Medium.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!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=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
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="Golos-Text_Medium.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebMedium {
|
||||
font-family: 'GolosTextWebMedium';
|
||||
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;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
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');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebMedium samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Medium</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebMedium 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>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebMedium samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. 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>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebRegular';
|
||||
src:
|
||||
url('Golos-Text_Regular.woff2') format('woff2'),
|
||||
url('Golos-Text_Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!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=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
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="Golos-Text_Regular.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebRegular {
|
||||
font-family: 'GolosTextWebRegular';
|
||||
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;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
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');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebRegular samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text Regular</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebRegular 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>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebRegular samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. 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>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font Golos Text: Copyright ? ParaType, 2018. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'GolosTextWebVF';
|
||||
src:
|
||||
url('Golos-Text_VF.woff2') format('woff2'),
|
||||
url('Golos-Text_VF.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!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=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<!--
|
||||
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="Golos-Text_VF.css" type="text/css" charset="utf-8">
|
||||
<style type="text/css" media="screen">
|
||||
body {font-family: Helvetica, Arial, sans-serif; color:#333333;}
|
||||
.GolosTextWebVF {
|
||||
font-family: 'GolosTextWebVF';
|
||||
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;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
border-radius: 15%;
|
||||
background-color: #DCDCDC;
|
||||
border: none;
|
||||
}
|
||||
.active{
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
fsize = 24
|
||||
window.onload = function(){ active('kern')};
|
||||
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');
|
||||
document.getElementById('sample-text').style.fontSize = "28px";
|
||||
p.style.fontSize = fsize + "px";
|
||||
document.getElementById('stext').value = fsize + "px";
|
||||
}
|
||||
|
||||
function changeFSize()
|
||||
{
|
||||
tsize = document.getElementById('stext').value;
|
||||
fsize = parseInt (tsize);
|
||||
setSize ();
|
||||
return false;
|
||||
}
|
||||
function active(value)
|
||||
{
|
||||
const button = document.getElementById(value);
|
||||
const allFeatures = document.querySelectorAll(".features button");
|
||||
button.classList.toggle('active');
|
||||
let features = "";
|
||||
for(let i = 0; i < allFeatures.length; i ++){
|
||||
features += "'" + allFeatures[i].id + "'" + " ";
|
||||
if(allFeatures[i].classList.contains("active")){
|
||||
features += "1";
|
||||
}
|
||||
else { features += "0"}
|
||||
|
||||
if(i+1 !== allFeatures.length) {
|
||||
features += ",";
|
||||
}
|
||||
}
|
||||
let sample = document.getElementById('sample');
|
||||
let sampleText = document.getElementById('sample-text');
|
||||
let styles = "font-feature-settings:" + features + ";";
|
||||
sample.setAttribute("style", styles);
|
||||
sampleText.setAttribute("style", styles);
|
||||
setSize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p class="caption">
|
||||
Font: <br>
|
||||
|
||||
<span class="GolosTextWebVF samplebox" style="font-size:60px; color:#990000">
|
||||
Golos Text VF</span></p>
|
||||
|
||||
<p class="caption">
|
||||
Sample Text:</p>
|
||||
<p id="sample-text" class="GolosTextWebVF 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>Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.</p>
|
||||
|
||||
<p class="caption">
|
||||
<div>
|
||||
<div>
|
||||
<form onsubmit="return changeFSize();">
|
||||
Character Set: <input type="button" value="-" onClick="less()"> <input id="stext" type="text" value="24px" style="width:40px"> <input type="button" value="+" onClick="more()"></p>
|
||||
</form>
|
||||
<p id="sample" class="GolosTextWebVF samplebox" style="font-size:24px;">
|
||||
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Ł ł Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ ∆ − ∕ √ ≈ ≤ ≥ 〈 〉
|
||||
</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
<p>OpenType features:</p><button id='aalt' class='feature' onclick=active('aalt') title='Access All Alternates'>aalt</button><button id='calt' class='feature' onclick=active('calt') title='Contextual Alternates'>calt</button><button id='case' class='feature' onclick=active('case') title='Case-Sensitive Forms'>case</button><button id='ordn' class='feature' onclick=active('ordn') title='Ordinals'>ordn</button><button id='sups' class='feature' onclick=active('sups') title='Superscript'>sups</button><button id='frac' class='feature' onclick=active('frac') title='Fractions'>frac</button><button id='pnum' class='feature' onclick=active('pnum') title='Proportional Figures'>pnum</button><button id='tnum' class='feature' onclick=active('tnum') title='Tabular Figures'>tnum</button><button id='lnum' class='feature' onclick=active('lnum') title='Lining Figures'>lnum</button><button id='onum' class='feature' onclick=active('onum') title='Oldstyle Figures'>onum</button><button id='cpsp' class='feature' onclick=active('cpsp') title='Capital Spacing'>cpsp</button><button id='kern' class='feature' onclick=active('kern') title='Kerning'>kern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="CopyrightFont">
|
||||
© ParaType, 2013. 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>Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»</p> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" id="ico">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 14C7.88071 14 9 12.8807 9 11.5C9 10.1193 7.88071 9 6.5 9C5.11929 9 4 10.1193 4 11.5C4 12.8807 5.11929 14 6.5 14ZM6.5 16C8.98528 16 11 13.9853 11 11.5C11 11.331 10.9907 11.1642 10.9725 11H13.0275C13.0093 11.1642 13 11.331 13 11.5C13 13.9853 15.0147 16 17.5 16C19.9853 16 22 13.9853 22 11.5C22 11.331 21.9907 11.1642 21.9725 11H23V9H21.2422C20.435 7.79401 19.0602 7 17.5 7C15.9398 7 14.565 7.79401 13.7578 9H10.2422C9.43496 7.79401 8.06021 7 6.5 7C4.93979 7 3.56504 7.79401 2.75777 9H1V11H2.02746C2.00932 11.1642 2 11.331 2 11.5C2 13.9853 4.01472 16 6.5 16ZM17.5 14C18.8807 14 20 12.8807 20 11.5C20 10.1193 18.8807 9 17.5 9C16.1193 9 15 10.1193 15 11.5C15 12.8807 16.1193 14 17.5 14Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 870 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" id="ico">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 5H12V3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H12V19H19V5ZM10.0037 7L13.5858 10.5821L15 11.9963L13.5858 13.4105L10.0037 16.9925L8.58952 15.5783L11.1678 13H2V11H11.1753L8.58952 8.41421L10.0037 7Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 402 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" id="ico">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5355 6.46447C15.4882 8.41709 15.4882 11.5829 13.5355 13.5355C11.5829 15.4882 8.41709 15.4882 6.46447 13.5355C4.51184 11.5829 4.51184 8.41709 6.46447 6.46447C8.41709 4.51184 11.5829 4.51184 13.5355 6.46447ZM15.6066 14.1927C17.6623 11.4509 17.4434 7.5439 14.9497 5.05025C12.2161 2.31658 7.78392 2.31658 5.05025 5.05025C2.31658 7.78392 2.31658 12.2161 5.05025 14.9497C7.54395 17.4434 11.451 17.6623 14.1929 15.6065L19.59 21L21 19.59L15.6066 14.1927Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 634 B |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Loading…
Reference in New Issue