اضافة تجربة الخطوط بصفحات المواضيع

السلام عليكم

ورحمة الله

وبركاته

في هذه التدوينة سنقدم لكم خاصية
ربما شاهدتم مثلها على
مواقع مختصة في تقديم الخطوط العربية
ك google font
تكمن وظيفة هذه الخاصية
في معاينة الخطوط من طرف الزائر على موقعك
قبل استعمالها او تحميلها

معاينة

طريقة التركيب

1. قم بتحرير القالب ثم ابحث عن الوسم ]]></b:skin>
2. ثم قم بلصق الأكواد التالية فوقه

• .contentfont #text {
•   font-family: 'Lato';
•   border: none;
•   border-bottom: 1px solid #BDBDBD;
•   background-color: #FAFAFA;
•   font-size: 25px;
•   width: 60%;
• }
• .contentfont #button {
•   border: none;
•   padding: 15px 30px;
•   margin-bottom: 15px;
•       font-family: unset;
•     text-transform: uppercase;
•     border-radius: 25px;
•     background-color: #00a8ab;
•   color: #fff;
•   font-weight: 100;
•   cursor: pointer;
• }
• .contentfont #button:hover {
•   background-color: #34495e;
• }
• .contentfont form label, .contentfont form input {
•     display: inline-block;
•     padding: 0 10px;
• }
• 
  
• .info-fonts span {
•   display: none;
• position: relative;
•     float: left;
•     width: 100%;
•     padding: 3px;
•     min-height: 30px;
•     background: #f8fafd;
•     border: 1px solid #f1f1f1;
• }
• 
  
• .info-fonts label {
•       cursor: pointer;
•     display: inline-block;
•     padding: 10px;
•     margin: 10px 0 0 0;
•     color: black;
• }
• .info-fonts label:first-child {
• }
• 
  
• .info-fonts input {
•   display: none;
• }
• .info-fonts input:checked + span {
•   display: initial;
• }
• .info-fonts label:active {
•     color: #00a8ab !important;
• }
• span.tab1:before {
•     content: '';
•     width: 77px;
•     background: #00a8ab;
•     height: 4px;
•     z-index: 999;
•     position: relative;
•     display: block;
•     margin: -8px 17.4em auto;
• }
• span.tab2:before {
•     content: '';
•     width: 77px;
•     background: #00a8ab;
•     height: 4px;
•     z-index: 999;
•     position: relative;
•     display: block;
•     margin: -8px 22.2em auto;
• }
• span.tab2:nth-child(odd):before {
•     content: '';
•     width: 77px;
•     background: #00a8ab;
•     height: 4px;
•     z-index: 999;
•     position: relative;
•     display: block;
•     margin: -8px 26.2em auto !important;
• }

1. الان ابحث عن الوسم </body>
2. ثم قم بلصق الأكواد التالية فوقه

• <script type='text/javascript'>
• /*<![CDATA[*/
• $(document).ready(function() {
• $('#button').click(function() {
• // Choice saved
• var font = $('input[name=font]:checked').val();
• // Treatment
• if (font == 'lato') {
• $('#text').css('font-family', 'lato');
• } else if (font == 'arial') {
• $('#text').css('font-family', 'arial');
• } else if (font == 'Reem Kufi') {
• $('#text').css('font-family', 'Reem Kufi');
• } else if (font == 'roboto') {
• $('#text').css('font-family', 'roboto');
• } else if (font == 'raleway') {
• $('#text').css('font-family', 'raleway');
• } else if (font == 'ubuntu') {
• $('#text').css('font-family', 'ubuntu');
• } else if (font == 'lobster') {
• $('#text').css('font-family', 'lobster');
• }
• });
• });
• /*]]>*/
• </script>

الأكواد باللون الاحمر تضع مكانها أكواد الخطوط المراد معاينتها

ولا تنسى تضمين كود الخط المراد عرضه بقالبك ليتمكن الزائر من معاينته

1. بعد انتهائك من الخطوات السابقة قم بنسخ الكود التالي
2. وعند كتابتك للمشاركة تنتقل الى تبويب html
3. ثم تضع الأكواد أسفل الموجودة سابقا

• <div class="cardfont">
• <!-- Title -->
• <div class="title">
• <h1>
• <span style="font-weight: 200;">تجربة</span>الخط</h1>
• اكتب أي شيئ في الصندوق ثم غير الخط</div>
• 
  
• <!-- Content -->
• <div class="contentfont">
• <input id="text" placeholder="اكتب هنا" type="text" />
• <form>
• <input checked="" id="lato" name="font" type="radio" value="arial" /><label arial="" for="">arial (default)</label><input id="Reem Kufi" name="font" type="radio" value="Reem Kufi" /><label for="Reem Kufi">Reem Kufi</label></form>
• <button id="button">اضغط هنا</button></div>
• 
  
• <div class="info-fonts">
• <label for="btn_one">standard</label><input checked="checked" id="btn_one" name="nesto" type="radio" /><span class="tab1">&lt;link href="https://fonts.googleapis.com/css?family=Reem+Kufi&amp;display=swap" rel="stylesheet"&gt;</span><label for="btd_two">@import</label><input id="btd_two" name="nesto" type="radio" /><span class="tab2"> &lt;style&gt;@importurl('https://fonts.googleapis.com/css?family=Reem+Kufi&amp;display=swap');&lt;/style&gt; </span><label for="btd_tree">css</label><input id="btd_tree" name="nesto" type="radio" /><span class="tab2">font-family: 'Reem Kufi', sans-serif;</span></div>
• </div>
• </div>

قم بتغيير الكود باللون الأحمر كما في الخطوات السابقة والأكواد باللون الأزرق بما يناسبك. فقط ركز قليلا وستفهم باذن الله وان احتجت مساعدة فصندوق التعليقات بالأسفل