代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="IKKI, IKKI2000, IKKI Studio, IKKI-Studio, ikki, ikki2000, ikkistudio, HarmonyOS Sans, HarmonyOS Sans Fonts, HarmonyOS Fonts, HarmonyOS Web Fonts, Harmony, HarmonyOS, harmony, harmonyos, Font, Fonts, font, fonts, Web Font, Web Fonts, Webfont, Webfonts, web font, web fonts, webfont, webfonts">
<meta name="description" content="HarmonyOS Web Fonts~">
<meta name="author" content="IKKI">
<meta name="copyright" content="Huawei Device Co., Ltd.">
<title>HarmonyOS Web Fonts Demo</title>
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" crossorigin="anonymous"></script>
<link id="css" rel="stylesheet">
<style>
html,
body {
width: 100%;
height: 100%;
background-color: #f1f3f5;
}
h3 {
font-size: 16px;
}
h3 small {
margin-top: .1rem;
}
.s10 { font-size: 10px; }
.s10:after { content: '10px'; }
.s11 { font-size: 11px; }
.s11:after { content: '11px'; }
.s12 { font-size: 12px; }
.s12:after { content: '12px'; }
.s14 { font-size: 14px; }
.s14:after { content: '14px'; }
.s16 { font-size: 16px; }
.s16:after { content: '16px'; }
.s18 { font-size: 18px; }
.s18:after { content: '18px'; }
.s20 { font-size: 20px; }
.s20:after { content: '20px'; }
.s24 { font-size: 24px; }
.s24:after { content: '24px'; }
.s30 { font-size: 30px; }
.s30:after { content: '30px'; }
.s36 { font-size: 36px; }
.s36:after { content: '36px'; }
.s48 { font-size: 48px; }
.s48:after { content: '48px'; }
.s60 { font-size: 60px; }
.s60:after { content: '60px'; }
p:after {
padding-left: .5em;
color: #ccc;
}
li {
flex: 2 0 10%;
}
li:first-child,
li:last-child {
flex: 1 0 5%;
font-size: 14px;
color: #ccc;
}
@media only screen and (max-width: 767px) {
li div {
transform: scale(.6);
}
}
</style>
</head>
<body>
<div class="container-fluid d-flex flex-column h-100">
<h3 class="d-flex justify-content-center align-items-center flex-shrink-0 m-0 p-3">
<img src="https://gitee.com/IKKI2000/harmonyos-icons/raw/main/HarmonyOS.svg" alt="HarmonyOS">
<strong class="d-flex flex-column ps-3">网络字体演示<small class="fw-normal">Web Fonts Demo</small></strong>
</h3>
<div class="card flex-fill text-center mb-3">
<div class="card-header p-2">
<div class="row g-2">
<div class="col-md-6">
<select class="form-select" onchange="switchLang(this);"></select>
</div>
<div class="col-md-6">
<input class="form-control" type="text" oninput="inputText(this);">
</div>
</div>
</div>
<div class="card-body d-flex flex-column justify-content-center align-items-center overflow-hidden">
<p class="s10 text-nowrap mb-0"></p>
<p class="s11 text-nowrap mb-0"></p>
<p class="s12 text-nowrap mb-0"></p>
<p class="s14 text-nowrap mb-0"></p>
<p class="s16 text-nowrap mb-0"></p>
<p class="s18 text-nowrap mb-0"></p>
<p class="s20 text-nowrap mb-0"></p>
<p class="s24 text-nowrap mb-0"></p>
<p class="s30 text-nowrap mb-0"></p>
<p class="s36 text-nowrap mb-0"></p>
<p class="s48 text-nowrap mb-0"></p>
<p class="s60 text-nowrap mb-0"></p>
</div>
<div class="card-footer">
<ul class="list-unstyled d-none d-md-flex flex-nowrap justify-content-between align-items-center mb-1">
<li class="text-start"><div class="d-none d-md-block">字体</div></li>
<li><div>Thin</div></li>
<li></li>
<li><div>Light</div></li>
<li><div>Regular</div></li>
<li><div>Medium</div></li>
<li></li>
<li><div>Bold</div></li>
<li></li>
<li><div>Black</div></li>
<li class="text-end"><div class="d-none d-md-block">Font</div></li>
</ul>
<input class="w-100" type="range" min="0" max="1000" step="1" value="400" oninput="adjust(this);">
<ul class="list-unstyled d-flex flex-nowrap justify-content-between align-items-center m-0">
<li class="text-start"><div class="d-none d-md-block">字重</div></li>
<li><div>100</div></li>
<li></li>
<li><div>300</div></li>
<li><div>400</div></li>
<li><div>500</div></li>
<li></li>
<li><div>700</div></li>
<li></li>
<li><div>900</div></li>
<li class="text-end"><div class="d-none d-md-block">Weight</div></li>
</ul>
</div>
</div>
</div>
<script>
var options = [
{
lang: 'Hans',
css: 'sc',
name: '汉语 - 简体中文',
content: '心宇宙 字无穷'
},
{
lang: 'Hant',
css: 'tc',
name: '漢語 - 繁體中文',
content: '心宇宙 字無窮'
},
{
lang: 'en',
css: '',
name: 'English',
content: 'Heart universe Word infinity'
},
{
lang: 'ru',
css: '',
name: 'Русский',
content: 'Сердце вселенная Слово бесконечность'
},
{
lang: 'fr',
css: '',
name: 'Français',
content: 'Cœur univers Mot infini'
},
{
lang: 'de',
css: '',
name: 'Deutsch',
content: 'Herz Universum Wort Unendlichkeit'
},
{
lang: 'es',
css: '',
name: 'Español',
content: 'Corazón universo Palabra infinito'
},
{
lang: 'pt',
css: '',
name: 'Português',
content: 'Coração universo Palavra infinito'
},
{
lang: 'it',
css: '',
name: 'Italiano',
content: 'Cuore universo Parola infinito'
},
{
lang: 'ar',
css: 'naskh_arabic',
name: 'العربية',
content: 'الكون القلب كلمة لانهائية'
},
{
lang: 'ja',
css: 'sc',
name: '日本語',
content: '心の宇宙 言葉の無限'
},
{
lang: 'ur',
css: 'naskh_arabic',
name: 'اردو',
content: 'دل کائنات لفظ انفینٹی'
},
{
lang: 'ms',
css: '',
name: 'Melayu',
content: 'Hati alam semesta Perkataan infiniti'
},
{
lang: 'id',
css: '',
name: 'Indonesia',
content: 'Hati alam semesta Kata infinity'
},
{
lang: 'pa',
css: 'naskh_arabic',
name: 'ਪੰਜਾਬੀ',
content: 'ਦਿਲ ਬ੍ਰਹਿਮੰਡ ਸ਼ਬਦ ਅਨੰਤਤਾ'
},
{
lang: 'tr',
css: '',
name: 'Türkçe',
content: 'Kalp evren Kelime sonsuzluk'
},
{
lang: 'fa',
css: 'naskh_arabic',
name: 'فارسی',
content: 'قلب جهان کلمه بی نهایت'
},
{
lang: 'sw',
css: '',
name: 'Kiswahili',
content: 'Moyo ulimwengu Neno infinity'
},
{
lang: 'vi',
css: '',
name: 'Tiếng Việt',
content: 'Trái tim vũ trụ Từ vô hạn'
},
{
lang: 'jv',
css: '',
name: 'Jawa',
content: 'Ati semesta Tembung tanpa wates'
},
{
lang: 'pl',
css: '',
name: 'Polski',
content: 'Serce wszechświat Słowo nieskończoność'
},
{
lang: 'uk',
css: '',
name: 'Українська',
content: 'Серце всесвіт Слово нескінченність'
},
{
lang: 'ro',
css: '',
name: 'Română',
content: 'Inimă univers Cuvânt infinit'
},
{
lang: 'nl',
css: '',
name: 'Nederlands',
content: 'Hart universum Woord oneindig'
},
{
lang: 'sr',
css: '',
name: 'Српски',
content: 'Срце универзум Реч бесконачност'
},
{
lang: 'hr',
css: '',
name: 'Hrvatski',
content: 'Srce svemir Riječ beskonačnost'
},
{
lang: 'bs',
css: '',
name: 'Bosanski',
content: 'Srce univerzum Riječ beskonačnost'
},
{
lang: 'hu',
css: '',
name: 'Magyar',
content: 'Szív univerzum Szó végtelen'
},
{
lang: 'el',
css: '',
name: 'Ελληνικά',
content: 'Καρδιά σύμπαν Λέξη άπειρο'
},
{
lang: 'cs',
css: '',
name: 'Čeština',
content: 'Srdce vesmír Slovo nekonečno'
},
{
lang: 'sv',
css: '',
name: 'Svenska',
content: 'Hjärta universum Ord oändlighet'
},
{
lang: 'bg',
css: '',
name: 'Български',
content: 'Сърце вселена Дума безкрайност'
},
{
lang: 'ca',
css: '',
name: 'Català',
content: 'Cor univers Paraula infinit'
},
{
lang: 'sq',
css: '',
name: 'Shqip',
content: 'Zemër univers Fjalë pafundësi'
},
{
lang: 'da',
css: '',
name: 'Dansk',
content: 'Hjerte univers Ord uendelighed'
},
{
lang: 'no',
css: '',
name: 'Norsk',
content: 'Hjerte univers Ord uendelighet'
},
{
lang: 'sk',
css: '',
name: 'Slovenský',
content: 'Srdce vesmír Slovo nekonečno'
},
{
lang: 'mk',
css: '',
name: 'Mакедонски',
content: 'Срце универзум Збор бесконечност'
},
{
lang: 'lt',
css: '',
name: 'Lietuvių',
content: 'Širdies visatos Žodis begalybė'
},
{
lang: 'sl',
css: '',
name: 'Slovenščina',
content: 'Srce vesolje Beseda neskončnost'
},
{
lang: 'be',
css: '',
name: 'Беларуская',
content: 'Сэрца сусвету Слова бясконцасць'
},
{
lang: 'ga',
css: '',
name: 'Gaeilge',
content: 'Croí cruinne Focal infinity'
},
{
lang: 'lv',
css: '',
name: 'Latviski',
content: 'Sirds visuma Vārds bezgalība'
},
{
lang: 'gd',
css: '',
name: 'Ghàidhlig',
content: 'Cruinne-cè cridhe Facal neo-chrìochnach'
},
{
lang: 'cy',
css: '',
name: 'Cymraeg',
content: 'Calon bydysawd Gair anfeidroldeb'
},
{
lang: 'fi',
css: '',
name: 'Suomi',
content: 'Sydämen universumin Sana äärettömyys'
},
{
lang: 'et',
css: '',
name: 'Eesti',
content: 'Südame universumi Sõna lõpmatus'
},
{
lang: 'mt',
css: '',
name: 'Malti',
content: 'Qalb univers Kelma infinita'
}
];
$(function () {
$.each(options, function (i, item) {
$('select').append('<option value="' + item.lang + '" data-css="' + item.css + '" data-content="' + item.content + '">' + item.name + '</option>');
});
$('select').trigger('change');
});
function switchLang(dom) {
$('html').attr('lang', $(dom).val());
if ($(dom).find('option[value="' + $(dom).val() + '"]').attr('data-css') !== '') {
$('#css').attr('href', 'css/harmonyos_sans_' + $(dom).find('option[value="' + $(dom).val() + '"]').attr('data-css') + '.css');
} else {
$('#css').attr('href', 'css/harmonyos_sans.css');
}
$('.card-header input').val($(dom).find('option[value="' + $(dom).val() + '"]').attr('data-content'));
$.each($('p'), function (i, item) {
$(item).text($(dom).find('option[value="' + $(dom).val() + '"]').attr('data-content'));
});
}
function inputText(dom) {
$.each($('p'), function (i, item) {
$(item).text($(dom).val());
});
}
function adjust(dom) {
$(dom).parent().prev().css('font-weight', $(dom).val());
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。