এইচটিএমএল ওয়েব পৃষ্ঠায় সমস্ত উপাদানগুলির জন্য ফন্টের বৈশিষ্ট্য কীভাবে নির্দিষ্ট করবেন?

127

আমি যখন ফন্টের পরিবার, ফন্টের আকার, রঙ ইত্যাদি সেট করি তখন মনে হয় কিছু নেস্টেড উপাদানগুলি এগুলিকে কুরুচিপূর্ণ ব্রাউজার ডিফল্ট দিয়ে ওভাররাইড করে।

আমি কি সত্যিই আমার পৃষ্ঠায় যে কোনও ধরণের উপাদানগুলির জন্য কয়েক ডজন বার উল্লেখ করতে পারি, বা বিশ্বব্যাপী একবার এবং চিরতরে সেট করার কোনও উপায় আছে?

কিভাবে যে কি?

css

— গর্বিত সদস্য
সূত্র

1

আপনি ঠিক কীভাবে হরফ পরিবার, আকার ... সেট করছেন?

— কোকোপ

251

* {
 font-size: 100%;
 font-family: Arial;
}

তারকাচিহ্নটি সমস্ত উপাদানকে বোঝায়।

— Bazzz
সূত্র

15

এটি কাজ করে, তবে এটি সর্বোত্তম সমাধান নয়। ব্রাউজারটি '*' দেখলে এটি পৃষ্ঠার সমস্ত এইচটিএমএল উপাদানগুলির উপরে চলে যায় এবং সেগুলিতে সিএসএস প্রয়োগ করে। এমনকি এমন উপাদানগুলির ক্ষেত্রেও যেখানে নিয়মটি কোনও অর্থ দেয় না। এইচটিএমএলের আকারের উপর নির্ভর করে এটি পৃষ্ঠা রেন্ডারিংকে ধীর করতে পারে।

— সিজার কানাসা

4

সম্মত হন, তবে এটি বাগএলার্ট যেমনটি বলেছে তেমন সমস্ত উপাদানগুলিতে CSS প্রয়োগ করে। যদি কেউ সমস্ত উপাদানকে প্রভাবিত করতে চায় তবে কেউ পারফরম্যান্সটি কিছুটা কমিয়ে আনতে পারেন। :)

— বাজ

1

আপনি আরও যোগ করতে পারেন! প্রতিটি শৈলীর ঘোষণার শেষে এটির চেয়ে বেশি অন্যান্য স্টাইলের ঘোষণার বিরুদ্ধে নিরাপদ থাকার জন্য গুরুত্বপূর্ণ।

— এস ..

4

আমি জানি যে এটি 5 বছর হয়েছে, তবে আমি অবাক হয়েছি এখনও অবধি কেউ তা খেয়াল করেনি: "ফন্ট-পরিবার" তে আপনার কোনও উইন্ডোজ ফন্ট নির্দিষ্ট করা উচিত নয় (অবশ্যই এটি ওয়েবফন্ট না হলে) - আরিয়াল, হেলভেটিকা, সানস-সিরিফ আরও বেশি উপযুক্ত.

— রোব 74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}ফন্টের উত্তরাধিকারী এবং যদি আপনি সত্যিই ওভাররাইড ব্যবহার এড়াতে চান: *,:before,:after{font-family:inherit;}আপনি যদি সর্বজনীন নির্বাচক ব্যবহার করতে চান তবে পরিবর্তে উত্তরাধিকার ব্যবহার করুন।

— দারচার

18

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

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

সম্পাদনা: আপনি সিএসএস রিসেটগুলি পড়তে চাইতে পারেন; এই মত থ্রেড দেখুন

— পল
সূত্র

10

আমি এই পরামর্শকে যথেষ্ট চাপ দিতে পারি না: একটি রিসেট স্টাইলশিট ব্যবহার করুন, তারপরে সবকিছু পরিষ্কারভাবে সেট করুন। এটি আপনার ক্রস ব্রাউজার সিএসএস বিকাশের সময় অর্ধেক কেটে ফেলবে।

এরিক মায়ারের রিসেট.এসএস চেষ্টা করে দেখুন ।

— ক্রিস কক্স
সূত্র

এই রিসেট.এসএস ব্যবহার করার জন্য, আমি কি কেবল স্টাইলশীটটি আমার পৃষ্ঠায় লিঙ্ক করব বা আমাকে কি এটি টুইট করতে হবে? আমার প্রধানত সমস্ত বড় ব্রাউজারগুলিতে একই ফন্টের পরিবার এবং আকার থাকা দরকার। রিসেট.এসএসএস আমাকে ডিফল্টরূপে এটি করতে সহায়তা করে?

— ডারথ কোডার

1

আমি আমার স্টাইলশীটটিকে পৃথকভাবে লিঙ্ক করার পরিবর্তে এটি অনুলিপি করে আটকানোর প্রবণতা রাখছি, এইচটিটিপি অনুরোধ সংরক্ষণ করে। এটি আপনাকে ব্রাউজারগুলির জুড়ে সামঞ্জস্যপূর্ণ শৈলীগুলি সেট করতে সহায়তা করবে কারণ এটি সবকিছুকে শূন্য করে: কেবলমাত্র শৈলীগুলি আপনি লিখবেন।

— ক্রিস কক্স

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

— দর্থ কোডার

8

আপনি এগুলি বডি ট্যাগে সেট করতে পারেন

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
সূত্র

13

এটি সঠিক নয় কারণ বেশিরভাগ ব্রাউজারগুলি এই ফন্টটি কিছু উপাদানগুলিতে প্রয়োগ করে না (উপাদানগুলি ফন্ট-শৈলীর উত্তরাধিকারী হবে না)

— ট্র্যাভিস -146

@ ট্র্যাভিস -১6 what কি ব্রাউজার? কোন উপাদান? আপনি জানেন যে একটি ব্রাজিল অবশ্যই অনুসরণ করবে।

— বামিহ

@ বমিহ ক্রোম on২ এ একটি নির্দিষ্ট উদাহরণ (যা আমাকে এখানে আসলে নিয়ে এসেছিল) এটি হ'ল এটি কোনও বোতামের মধ্যে টেক্সট বা মেনু নির্বাচন করে ফন্টটি প্রয়োগ করে না।

— নিক সিলভেস্ট্রি

2

আপনি যদি নিজের bodyউপাদানটির জন্য সিএসএস বৈশিষ্ট্যগুলি নির্দিষ্ট করে <body></body>থাকেন তবে এটি স্টাইলশীটে পরে ওভাররাইড না করার কারণে এটি কোনও সময়ের মধ্যে প্রযোজ্য ।

— টাইলার ট্রিট
সূত্র

0

আপনি যদি শরীরের সমস্ত উপাদানের স্টাইল সেট করতে চান তবে আপনার পরবর্তী কোড ^ ব্যবহার করা উচিত ^

  body{
    color: green;
    }

— স্টেপান পোপেরেচনিই
সূত্র