সিএসএস সহ পুরো ওয়েবসাইটে একক ফন্ট প্রয়োগ করা হচ্ছে


92

আমি আমার পুরো ওয়েবসাইট জুড়ে "আলজেরিয়ান" নামে একটি একক ফন্ট ব্যবহার করতে চাই। সুতরাং, আমাকে সমস্ত এইচটিএমএল ট্যাগ পরিবর্তন করতে হবে এবং আমি বিভিন্ন ট্যাগের জন্য আলাদা কোড লিখতে চাই না যেমন:

button{font-family:Algerian;}
div{font-family:Algerian;}

নীচে লিখিত পদ্ধতিটিও অত্যন্ত নিরুৎসাহিত:

div,button,span,strong{font-family:Algerian;}

4
হরফ-পরিবার একটি উত্তরাধিকার সূত্রে প্রাপ্ত মান, সুতরাং কেন এটি কেবল শরীরে সংজ্ঞায়িত করা হবে না?

আপনি জুক্কা কে। কোরপেলা থেকে উত্তরটি চয়ন করতে পারেন। এটি বর্তমান বাছাই করা উত্তরের চেয়ে আগে, প্রায় এক মাসের জন্য, এবং যাইহোক, প্রায় একই বিষয়বস্তু রয়েছে।
Okm


আমি আপনাকে (জান হানিয়ে) এর উত্তর কখনই ব্যবহার না করার পরামর্শ দিচ্ছি কারণ এটি আপনার ফন্টটি সমস্ত এইচটিএমএল ট্যাগ এমনকি আপনার যে ট্যাগটি পরিবর্তন করতে পছন্দ করেন না তার জন্যও প্রয়োগ করে। উদাহরণস্বরূপ: আপনি যদি কোনও টিডি ট্যাগের মধ্যে ইমগ ট্যাগ তৈরি করেন এবং এটি পাঠ্য-প্রান্তিককরণ: কেন্দ্র এবং উল্লম্ব-সারিবদ্ধ: মাঝখানে করেন। এইভাবে ব্যবহার করে আপনার আইএমজি ট্যাগ টিডির কেন্দ্র হতে পারে না। সর্বোত্তম উপায়: আপনার দস্তাবেজটি পরীক্ষা করুন এবং কেবলমাত্র সেই ট্যাগগুলিতে ফন্ট ফর্ম্যাটটি প্রয়োগ করুন যার মধ্যে পাঠ্য রয়েছে
মাহদী জাজিনি

উত্তর:


116

font-familyঘোষণাটি bodyনির্বাচক হিসাবে রাখুন :

body {
  font-family: Algerian;
}

আপনার পৃষ্ঠার সমস্ত উপাদান তখনই এই ফন্ট-পরিবারের উত্তরাধিকারী হবে (যদি না আপনি অবশ্যই পরে এটিকে ওভাররাইড না করেন)।


11
font-familyযখন কোনও স্টাইল শীট উপাদানটির জন্য ফন্ট পরিবার সেট করে না তখন কোনও উপাদান তার পিতামাতার কাছ থেকে উত্তরাধিকার সূত্রে আসে । ব্রাউজার স্টাইল শীট সাধারণত কমপক্ষে জন্য ফন্ট পরিবার সেট input, textarea, code, tt, এবং preউপাদান।
Jukka K. Korpela

তুমি ঠিক. আমি এত দিন সিএসএস রিসেটের সাথে কাজ করছি আমি এই ধরণের জিনিসগুলি ভুলে যাই :)
জান হানিয়ে

বা আরও ভাল, দুটি শীর্ষ উত্তর একত্রিত করুন ... বডি, * {ফন্ট-পরিবার: আলজেরিয়ান;}
জেমস এস

106

4
আকর্ষণীয়ভাবে যথেষ্ট, এরিক মেয়ারের সিএসএস
রিসেটটি

এটি কি প্রতিটি একক উপাদানে ফন্ট পরিবারকে প্রয়োগ করে না? এটি দেখে মনে হচ্ছে এটি এটি অপ্রয়োজনীয় উপাদানগুলিতে প্রয়োগ করবে (<img> এর মতো) এবং অদক্ষ be আমি অবশ্যই ভুল হতে পারি, তবে আমি সবকিছুতে একটি স্টাইল প্রয়োগ করার ক্ষেত্রে সতর্কতা ব্যবহার করতে পড়েছি।
ম্যাক্স স্ট্রটার

যেহেতু সর্বজনীন নিয়ম অত্যধিকযোগ্য নয়, তাই আপনি নিজের সাইটে দ্বিতীয় ফন্ট ব্যবহার করতে পারবেন না।
জুলিয়ান এফ ওয়েইনার্ট

নোবাই যেহেতু এটি উল্লেখ করেছেন, তাই সর্বজনীন নির্বাচক ধীর হতে জানেন। আরও এখানে এখানে: ক্লেয়ারকোডস
তেরজে সোলেম

বা আরও ভাল, দুটি শীর্ষ উত্তর একত্রিত করুন ... বডি, * {ফন্ট-পরিবার: আলজেরিয়ান;}
জেমস এস

49

সর্বজনীন নির্বাচক *সমস্ত উপাদানকে বোঝায়, এই CSS এটি আপনার জন্য করবে:

*{
  font-family:Algerian;
}

তবে দুর্ভাগ্যক্রমে আপনি যদি ফন্টআউইজ আইকন বা কোনও আইকন ব্যবহার করেন যা তাদের নিজস্ব ফন্ট পরিবার প্রয়োজন, এটি কেবল আইকনগুলিকেই ধ্বংস করবে এবং তারা প্রয়োজনীয় দৃশ্য প্রদর্শন করবে না।

এটি এড়ানোর জন্য আপনি :notনির্বাচকটি ব্যবহার করতে পারেন , হ'ল ফন্টউইজ আইকনটির একটি নমুনা <i class="fa fa-bluetooth"></i>, তাই সহজভাবে আপনি ব্যবহার করতে পারেন:

*:not(i){
  font-family:Algerian;
}

এটি এই নামের সাথে ট্যাগ নামের উপাদানগুলি বাদ দিয়ে নথির সমস্ত উপাদানগুলিতে এই পরিবারকে প্রয়োগ করবে <i>, আপনি এটি ক্লাসেও করতে পারেন:

*:not(.fa){
  font-family:Algerian;
}

এটি এই পরিবারকে দস্তাবেজের সমস্ত উপাদানগুলিতে প্রয়োগ করবে "ফা" শ্রেণীর উপাদানগুলি ব্যতীত যা ফন্টউইজ ডিফল্ট শ্রেণিকে বোঝায়, আপনিও এর মতো একাধিক শ্রেণিকে লক্ষ্য করতে পারেন:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}

বুটস্ট্র্যাপ থেকে আইকন ব্যবহারের কারণে ওয়েবপৃষ্ঠাগুলিতে স্টাইলিংয়ের বর্তমান ব্যবহার অনুসারে এই উত্তরটি অনেক প্রয়োজনীয় বিশদ দেয় (গ্লাইফিকনস) এবং দুর্দান্ত ফন্ট
লক্ষ্মণ

দয়া করে মনে রাখবেন: (নির্বাচক নয়) হ'ল সিএসএস 3 যা সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয়। আইই 9+ আমাদের
আইয়

19

সর্বজনীন নির্বাচকের সাথে গুরুত্বপূর্ণ ব্যবহার করে মোবাইল ডিভাইসগুলি তাদের ডিফল্ট ফন্টের সাথে ফন্টটি পরিবর্তন করবে না তা নিশ্চিত করুন:

* { font-family: Algerian !important;}


3

ফর্ম উপাদানগুলির জন্য ব্রাউজারের দ্বারা ইতিমধ্যে আলাদা ফন্টের সংজ্ঞায়িত হওয়ার সম্ভাবনা রয়েছে, এই ফন্টটি সর্বত্র ব্যবহারের জন্য এখানে দুটি উপায় রয়েছে:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

প্রি / কোড, কেবিডি ইত্যাদির মতো উপাদানগুলিতে এখনও একটি মনোস্পেস ফন্ট থাকবে তবে আপনি যদি এই উপাদানগুলি ব্যবহার করেন তবে আপনি সেখানে একটি মনসপেস ফন্ট ব্যবহার করতে চান।

গুরুত্বপূর্ণ দ্রষ্টব্য: খুব কম লোকের ওএস এ এই ফন্টটি ইনস্টল করা থাকলে তালিকার দ্বিতীয় ফন্টটি ব্যবহার করা হবে। এখানে আপনি কোনও দ্বিতীয় ফন্ট সংজ্ঞায়িত করেছেন যাতে ডিফল্ট সেরিফ ফন্ট ব্যবহার করা হবে এবং এটি লিনাক্স বাদে টাইমস, টাইমস নিউ রোমান হবে।
দুটি বিকল্প রয়েছে: আপনার ফন্টটি ডাউনলোডযোগ্য ফন্ট হিসাবে বিনামূল্যে ব্যবহার করতে পারলে @ ফন্ট-ফেস ব্যবহার করুন বা ফ্যালব্যাক (গুলি) যুক্ত করুন: একটি দ্বিতীয়, তৃতীয়, ইত্যাদি এবং শেষ পর্যন্ত একটি ডিফল্ট পরিবার (সানস-সিরিফ, ক্রাইভ (*), মনোস্পেস বা সেরিফ)। ব্যবহারকারীর ওএসে বিদ্যমান তালিকার প্রথমটি ব্যবহার করা হবে।

(*) উইন্ডোজে ডিফল্ট অভিশাপ হ'ল কমিক সানস। যদি আপনি উইন্ডোজ ব্যবহারকারীদের ট্রল করতে চান তবে তা করবেন না :) আপনার বাচ্চাদের জন্মদিন ছাড়া যেখানে এটি স্বাগত হয় সেগুলি বাদে এই ফন্টটি ভয়ঙ্কর।


2

যদি "বডি" 1 টি এবং একই ফন্টের ব্যবহারের প্রয়োজন হয় তবে দয়া করে এটি আপনার পৃষ্ঠাগুলির মাথায় রাখুন:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

ট্যাগ মধ্যে সবকিছু <body>এবং </body>একই ফন্ট থাকবে


1

ঠিক আছে তাই আমি এই সমস্যাটি নিয়ে এসেছি যেখানে আমি বিভিন্ন বিকল্পের চেষ্টা করেছি।

আমি যে ফন্টটি ব্যবহার করছি তা হ'ল উবুন্টু-এলআই, আমি আমার ওয়ার্কিং ডিরেক্টরিতে একটি ফন্ট ফোল্ডার তৈরি করেছি। ফোল্ডারের ফন্টের নীচে

আমি এটি প্রয়োগ করতে সক্ষম হয়েছি ... অবশেষে এখানে আমার কার্য কোড

আমি এটি আমার সম্পূর্ণ ওয়েবসাইটে প্রয়োগ করতে চেয়েছিলাম তাই এটি সিএসএস ডকের শীর্ষে রেখেছি। সমস্ত ডিভ ট্যাগের উপরে (এটি গুরুত্বপূর্ণ নয়, কেবল এটি জেনে থাকুন যে আপনি আপনার স্ক্রিপ্ট পোস্টের পরে যে কোনও স্বতন্ত্র ফন্টকে অগ্রাধিকার দেবে)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

আমি যদি তখন আমার সমস্ত এইচ 1 ট্যাগকে অন্যরকম কিছু হতে চেয়েছিলাম তবে সান্ফ সরীফ বলতে চাই আমি এর মতো কিছু করব

h1{
   font-family: Sans-sarif;
}

যে ক্ষেত্রেটি থেকে কেবল আমার এইচ 1 ট্যাগগুলি সানস-শারিফ ফন্ট হবে এবং আমার পৃষ্ঠাটির বাকী অংশটি উবুন্টু-এলআই ফন্ট হবে


0

বুটস্ট্র্যাপে, ওয়েব পরিদর্শক বলেছেন শিরোনামগুলি 'উত্তরাধিকারী' হিসাবে সেট করা আছে

আমার পৃষ্ঠাটি নতুন ফন্টে সেট করার জন্য যা দরকার ছিল তা হ'ল

div, p {font-family: Algerian}

এটা। এসএসএস মধ্যে


-1
*{font-family:Algerian;}

এই এইচটিএমএল আমার জন্য কাজ করেছে। ওয়ার্ডপ্রেসে ক্যানভাস সেটিংসে যুক্ত করা হয়েছে।

দেখতে দুর্দান্ত - ধন্যবাদ!

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.