سبک های فونت HTML – نحوه سبک کردن متن در HTML

قلم ها مانند لباس های صفحه وب شما هستند و بازدید کنندگان می مانند. لباس آن را ضعیف بپوشید و آنها سریعتر از یک صفحه آهسته باقی می مانند.

یک سبک فونت HTML که به خوبی انتخاب شده است نقش مهمی در تقویت خوانایی ، بهبود تجربه کاربر و اضافه کردن یک لمس حرفه ای به سایت شما دارد. تایپوگرافی از نوع مناسب می تواند جذابیت بصری یک وب سایت را ایجاد یا از بین ببرد ، چگونه می توانید با محتوای خود درگیر شوید.

در مورد آخرین باری که از یک وب سایت با قلم های دشوار خوانده شده فکر کردید-آیا می مانید یا روی آن کلیک می کنید؟

انتخاب قالب بندی متن HTML مناسب ، وضوح را تضمین می کند ، و باعث می شود محتوا در دسترس و آریتتی خوشایند باشد. شما در حال طراحی یک وبلاگ ، یک فروشگاه تجارت الکترونیکی یا یک نمونه کارها هستید ، درک چگونگی سبک کردن فونت ها از آن بسیار مهم است.

در این راهنما ، ما خانواده های فونت HTML متفاوت را کشف خواهیم کرد ، چگونه می توان آنها را با استفاده از CSS و بهترین PMIssice برای درخشش محتوای شما اعمال کرد. در پایان ، شما می توانید درک خوبی از نحوه استفاده از آنها داشته باشید ، طراحی و عملکرد وب سایت شما است.

درک دسته های سبک قلم HTML

فونت ها به طور کلی در نوع اصلی طبقه بندی می شوند که هر یک از آنها نیازهای مختلف طراحی را برای محتوای چاپی و استفاده دیجیتال ارائه می دهند:

گروه

فونت های سریف با سکته های کوچک دکوراتور یا “سریال” در انتهای حروف متمایز می شوند. فونت های موضوعی حس سنت ، تشریفات و حرفه ای بودن را برانگیخته و آنها را به عنوان اصلی در نوشتن دانشگاهی ، کتاب ، روزنامه ها و اسناد رسمی تبدیل می کند. فونت های سریف برای خوانایی عالی خود در چاپ هستند ، زیرا سریال ها به هدایت چشم در کنار متن کمک می کنند.

• بهترین موارد استفاده: مواد پرنسس ، مقالات طولانی ، گزارش های رسمی و برندسازی که به احساس تشریفات نیاز دارند.
• نمونه: Times New Roman ، Georgia ، Optima.

بینا

فونت های Sans-Serif فاقد سکته مغزی است و در نتیجه ظاهری تمیزتر و مدرن تر به وجود می آید. آنها به دلیل خوانایی زیاد در صفحه های دیجیتال ، در طراحی وب استفاده می کنند. فونت های Sans-Serif یک بی حسی براق و مینیمالیستی ارائه می دهند که برای اهداف مختلف کار می کند ، از وب سایت های تجاری گرفته تا تبلیغات و رابط های کاربر.

• بهترین موارد استفاده: وب سایت ها ، برنامه های تلفن همراه ، رابط های دیجیتال و مارک های معاصر.
• نمونه: Arial ، Helvetica ، Tahoma ، Verdana.

مینی بوس

فونت های Monospace اطمینان حاصل می کنند که هر شخصیت مقدار فضای افقی را اشغال می کند ، و آنها را در چیدمان های ساختاری مانند برنامه نویسی محیط زیست و رابط های برنامه نویسی بسیار خواص می کند. این یکنواختی به برنامه ها کمک می کند تا به راحتی بین شخصیت ها متفاوت شوند و خطاها را هنگام خواندن یا نوشتن کد کاهش می دهند. فونت های Monospace همچنین یک استیک متمایز و پرنعمت شبیه به ماشین تحریر مانند ، که می تواند برای عناصر تخصصی طراحی استفاده شود ، فراهم می کند.

• بهترین موارد استفاده: ویرایشگران کد ، اسناد فنی ، طراحی های یکپارچهسازی با سیستمعامل و برنامه های ترمینال.
• نمونه: پیک جدید ، کنسول ، موناکو.

مبهم

فونت های cursive متن دست نویس را تقلید می کنند ، که اغلب دارای سکته های روان و متصل هستند که احساس ظریف یا هنری ایجاد می کنند. فونت های موضوعی به جای محتوای طولانی مدت ، برای دکاتیوها و برنامه های خلاقانه مناسب هستند ، ASY می تواند برای خواندن در بلوک های بانکی متن متفاوت باشد. آنها یک شخص ، سبک یا حتی لمس لوکس را به طرح ها اضافه می کنند و آنها را برای دعوت ها ، برندسازی و مواد تبلیغاتی ایده آل می کنند.

• بهترین موارد استفاده: دعوت نامه ها ، کارت های تبریک ، برندسازی خلاق و عناصر وب سایت هنری.
• نمونه: Script Script MT ، دست نویس Lucida ، فیلمنامه رقص.

خیال

فونت های فانتزی بسیار تزئین شده و سبک هستند ، عناصر منحصر به فرد و بی نظیر که باعث می شود آنها از هم جدا شوند. فونت های موضوعی به طور معمول برای طرح های مضمون مانند وب سایت های بازی ، پوسترهای فیلم یا مواد تبلیغاتی که از منابع و هویت بصری draamatic استفاده می کنند ، استفاده می شود. در حالی که از نظر دیدنی قابل توجه است ، فونت های فانتزی باید از درخشش استفاده کنند ، زیرا استفاده بیش از حد می تواند خوانایی را به خطر بیاندازد.

• بهترین موارد استفاده: بازی ، مارک سرگرمی ، وب سایت های مضمون و تبلیغات خلاق.
• نمونه: Papyrus ، Jokerman ، Impact.

هر نوع قلم یک عملکرد خاص را ارائه می دهد و انتخاب یکی به لحن و هدف محتوای شما بستگی دارد. ترکیبی خوب از خانواده های قلم می تواند خوانایی را تقویت کند ، تعامل را بهبود بخشد و هویت بصری یک برند را تقویت کند.

بهترین فونت HTML Font Web-Safe برای استفاده

فونت های فونت های ایمن وب روی همه دستگاه ها و مرورگرهای وب کار می کنند ، و مطمئن شوید که وب سایت شما SAM را در همه جا دوست دارد.

این زیر مجموعه ای از بهترین گزینه ها است:

• عیاشی: یک فونت بدون لباس Sans-Serif.
• Times New Roman: یک قلم رسمی Serif ، که اغلب در اسناد مورد استفاده قرار می گیرد و به دلیل استفاده از آن برای نوشتن دانشگاهی استفاده می شود.
• پیک جدید: یک فونت مونوپسین که معمولاً در برنامه نویسی استفاده می شود.
• وردانا: برای خوانایی روی صفحه نمایش طراحی شده است.
• گرجستان: یک قلم سریف برای خوانایی دیجیتال بهینه شده است.
• Trebuchet MS: یک فونت بدون سری با سبک متمایز.
• طنز Sans MS: گرچه بحث برانگیز است ، اما برای طرح های گاه به گاه یا غیر رسمی محبوب است.

هنگام انتخاب فونت ، تعادل با عملکرد با عملکرد ضروری است. در حالی که ممکن است با استفاده از انواع فونت های پیچیده یا منحصر به فرد ، فونت های ایمن وب سازگاری را در تمام دستگاه ها تضمین کنند و خطر متن با فرمت نمایش داده شده را کاهش می دهند. تضمین سازگاری در مرورگرها برای یک تجربه کاربر یکپارچه بسیار مهم است. با استفاده از CDN BlueHost (شبکه تحویل محتوا) ، در ارائه سریعتر فونت ها ، بهینه سازی سرعت بار صفحه و بهبود عملکرد وب سایت کمک خواهید کرد.

سبک های مختلف فونت موجود در HTML چیست؟

HTML گزینه های سبک قلم مانند طبیعی ، ایتالیایی ، مورب ، کلاه های کوچک و جسورانه را ارائه می دهد. سبک فونت پیش فرض را می توان با استفاده از برچسب ها یا خصوصیات CSS مانند سبک قلم و وزن فونت ، از جمله CSS درون خطی برای یک ظاهر طراحی سریع استفاده کرد. هر یک از ویژگی های سبک ، ظاهری منحصر به فرد و تأکید بر متن در یک سند HTML.

اجرای قلم ها در HTML و CSS

با استفاده از ویژگی فونت خانواده

خاصیت خانواده فونت در CSS همه شما برای تعریف فونت های اولیه و برگشتی ، که فونت های مختلف CSS است.

نمونه:

body {

font-family: Arial, Helvetica, sans-serif;

}

در صورتی که قلم اصلی توسط مرورگر کاربر پشتیبانی نمی شود ، فونت های برگشتی ضروری است. استفاده از چندین گزینه قلم ، متن شما حتی اگر گزینه اول قلم موجود باشد قابل خواندن است. اگر سازنده سایت WordPress AI Bluehost را امتحان می کنید ، سفارشی سازی فونت آسان را برای وب سایت وردپرس خود ارائه می دهد ، و استفاده از سبک های مختلف با دانش گسترده برنامه نویسی را ساده می کند.

ترکیب فونت های خارجی برای قالب بندی متن HTML

Google و @Font-Up به شما امکان می دهند از فونت های سفارشی استفاده کنید.

نمونه:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {

font-family: 'Roboto', sans-serif;

}

در صورت استفاده از فونت های سفارشی ، بهینه سازی سرعت بارگیری بسیار مهم است. پرونده های بزرگ می توانند وب سایت شما را کاهش دهند ، بنابراین از زیر مجموعه های قلم استفاده کنید که فقط شخصیت های لازم را شامل می شوند. میزبانی BlueHost همچنین بارگذاری بهینه شده ، کاهش زمان پاسخ به سرور و افزایش سرعت وب سایت بیش از حد را دارد.

p {

font-size: 16px;

}

h1 {
  font-weight: 700;
}

em {

font-style: italic;

}

a {

text-decoration: underline;

}

h2 {

text-transform: uppercase;

}